英文:
How do I make it so one p5.js drawing appears when I click a radio button?
问题
我已经创建了一个p5.js绘图，当你点击单选按钮时，p5.js绘图会发生变化。当我点击第一个单选按钮时，它正常工作，但当我点击第二个单选按钮时，以前的绘图仍然存在。我如何才能使第二个单选按钮点击时只出现一个绘图？
单选按钮的HTML代码：
<input type="radio" name="radiobutton" value="one" id="button1" onchange="checkM()"/>
<input type="radio" name="radiobutton" value="two" id="button2" onchange="checkS()"/>
JavaScript代码：
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
function drawDonut() {
console.log("重新绘制甜甜圈!");
background(218, 24, 132);
}
function checkS(){
document.getElementById("button1").checked = false;
circle(200, 200, 200);
}
function checkM(){
document.getElementById("button2").checked = false;
circle(100, 100, 100);
}
function setup() {
myCanvas = createCanvas(400, 400);
drawDonut();
}
谢谢。
英文:
I have created a p5.js drawing wherein when you click a radio button the p5.js drawing changes. When I click the first radio button, it works fine, but then I click the second one and the former drawing is still there. How do I make it so only one drawing appears when I click the second radio button?
Radio button html:
<input type="radio" name="radionbutton" value="one" id="button1" onchange="checkM()"/>
<input type="radio" name="radionbutton" value="two" id="button" onchange="checkS()"/>
Javascript:
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
function drawDonut() {
console.log("Redrawing our donut!");
background(218, 24, 132);
}
function checkS(){
document.getElementById("button").checked;
circle(200,200,200);
}
function checkM(){
document.getElementById("button1").checked;
circle(100,100,100);
}
function setup() {
myCanvas = createCanvas(400, 400);
drawDonut();
}
Thank you.
答案1
得分: 0
我尝试进行显示和移除圆圈的处理过程，位于 p5js draw() 函数 中，如下所示。
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
function draw() {
background(218, 24, 132);
if (button1.checked) {
circle(200,200,200)
}
if (button2.checked) {
circle(100,100,100)
}
}
function checkS() {
button1.checked;
}
function checkM() {
button2.checked;
}
function setup() {
myCanvas = createCanvas(400, 400);
}
html,
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<input type="radio" name="radionbutton" value="one" id="button1" onchange="checkS()" />
<label for="button1">S</label><br>
<input type="radio" name="radionbutton" value="two" id="button2" onchange="checkM()" />
<label for="button2">M</label><br>
<script src="sketch.js"></script>
</body>
</html>
英文:
My attempt is to do the process of displaying and removing the circles inside p5js draw() function like so.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
function draw() {
background(218, 24, 132);
if (button1.checked) {
circle(200,200,200)
}
if (button2.checked) {
circle(100,100,100)
}
}
function checkS() {
button1.checked;
}
function checkM() {
button2.checked;
}
function setup() {
myCanvas = createCanvas(400, 400);
}
<!-- language: lang-css -->
html,
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<input type="radio" name="radionbutton" value="one" id="button1" onchange="checkS()" />
<label for="button1">S</label><br>
<input type="radio" name="radionbutton" value="two" id="button2" onchange="checkM()" />
<label for="button2">M</label><br>
<script src="sketch.js"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论