如何使一个p5.js绘图在我点击单选按钮时出现？

huangapple
go评论98阅读模式
英文:

How do I make it so one p5.js drawing appears when I click a radio button?

问题

我已经创建了一个p5.js绘图，当你点击单选按钮时，p5.js绘图会发生变化。当我点击第一个单选按钮时，它正常工作，但当我点击第二个单选按钮时，以前的绘图仍然存在。我如何才能使第二个单选按钮点击时只出现一个绘图？

单选按钮的HTML代码：

  1. <input type="radio" name="radiobutton" value="one" id="button1" onchange="checkM()"/>
  2. <input type="radio" name="radiobutton" value="two" id="button2" onchange="checkS()"/>

JavaScript代码：

  1. var button1 = document.getElementById("button1");
  2. var button2 = document.getElementById("button2");
  4. function drawDonut() {
  5.   console.log("重新绘制甜甜圈!");
  7.   background(218, 24, 132);
  8. }
  10. function checkS(){
  11.   document.getElementById("button1").checked = false;
  12.   circle(200, 200, 200);
  13. }
  15. function checkM(){
  16.   document.getElementById("button2").checked = false;
  17.   circle(100, 100, 100);
  18. }
  20. function setup() {
  21.   myCanvas = createCanvas(400, 400);
  22.   drawDonut();
  23. }

谢谢。

英文:

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:

  1. &lt;input type=&quot;radio&quot; name=&quot;radionbutton&quot; value=&quot;one&quot; id=&quot;button1&quot; onchange=&quot;checkM()&quot;/&gt;
  2. &lt;input type=&quot;radio&quot; name=&quot;radionbutton&quot; value=&quot;two&quot; id=&quot;button&quot; onchange=&quot;checkS()&quot;/&gt;

Javascript:

  1. var button1 = document.getElementById(&quot;button1&quot;);
  2. var button2 = document.getElementById(&quot;button2&quot;);
  6. function drawDonut() {
  7.   console.log(&quot;Redrawing our donut!&quot;);
  9.   background(218, 24, 132);
  11.   
  12. }
  14. function checkS(){
  15.   document.getElementById(&quot;button&quot;).checked;
  16.   circle(200,200,200);
  17. }
  19. function checkM(){
  20.   document.getElementById(&quot;button1&quot;).checked;
  21.   circle(100,100,100);
  22. }
  24. function setup() {
  25.   
  26.   
  27.   myCanvas = createCanvas(400, 400);
  29.   drawDonut();
  30. }

Thank you.

答案1

得分: 0

我尝试进行显示和移除圆圈的处理过程，位于 p5js draw() 函数 中，如下所示。

  1. var button1 = document.getElementById("button1");
  2. var button2 = document.getElementById("button2");
  4. function draw() {
  5.   background(218, 24, 132);
  6.   if (button1.checked) {
  7.     circle(200,200,200)
  8.   }
  9.   if (button2.checked) {
  10.     circle(100,100,100)
  11.   }
  12. }
  14. function checkS() {
  15.   button1.checked;
  16. }
  18. function checkM() {
  19.   button2.checked;
  20. }
  22. function setup() {
  23.   myCanvas = createCanvas(400, 400);
  24. }
  1. html,
  2. body {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. canvas {
  8.   display: block;
  9. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
  6.   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
  7.   <link rel="stylesheet" type="text/css" href="style.css">
  8.   <meta charset="utf-8" />
  9. </head>
  11. <body>
  12.   <main>
  13.   </main>
  14.   <input type="radio" name="radionbutton" value="one" id="button1" onchange="checkS()" />
  15.   <label for="button1">S</label><br>
  16.   <input type="radio" name="radionbutton" value="two" id="button2" onchange="checkM()" />
  17.   <label for="button2">M</label><br>
  18.   <script src="sketch.js"></script>
  19. </body>
  21. </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 -->

  1. var button1 = document.getElementById(&quot;button1&quot;);
  2. var button2 = document.getElementById(&quot;button2&quot;);
  4. function draw() {
  5.   background(218, 24, 132);
  6.   if (button1.checked) {
  7.     circle(200,200,200)
  8.   }
  9.   if (button2.checked) {
  10.     circle(100,100,100)
  11.   }
  12. }
  14. function checkS() {
  15.   button1.checked;
  16. }
  18. function checkM() {
  19.   button2.checked;
  20. }
  22. function setup() {
  23.   myCanvas = createCanvas(400, 400);
  24. }

<!-- language: lang-css -->

  1. html,
  2. body {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. canvas {
  8.   display: block;
  9. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js&quot;&gt;&lt;/script&gt;
  6.   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js&quot;&gt;&lt;/script&gt;
  7.   &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;
  8.   &lt;meta charset=&quot;utf-8&quot; /&gt;
  9. &lt;/head&gt;
  11. &lt;body&gt;
  12.   &lt;main&gt;
  13.   &lt;/main&gt;
  14.   &lt;input type=&quot;radio&quot; name=&quot;radionbutton&quot; value=&quot;one&quot; id=&quot;button1&quot; onchange=&quot;checkS()&quot; /&gt;
  15.   &lt;label for=&quot;button1&quot;&gt;S&lt;/label&gt;&lt;br&gt;
  16.   &lt;input type=&quot;radio&quot; name=&quot;radionbutton&quot; value=&quot;two&quot; id=&quot;button2&quot; onchange=&quot;checkM()&quot; /&gt;
  17.   &lt;label for=&quot;button2&quot;&gt;M&lt;/label&gt;&lt;br&gt;
  18.   &lt;script src=&quot;sketch.js&quot;&gt;&lt;/script&gt;
  19. &lt;/body&gt;
  21. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月29日 09:06:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76354162.html
  • if-statement
  • javascript
  • p5.js
  • radio-button
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定