如何使用javascript創建單選按鈕（我不想使用html標籤）？

Question

我在可汗學院學習JavaScript，需要幫助創建一個收音機類型按鈕。對於這段代碼，我寧願不使用html標籤。

我最初有一個表情符號，可以隨着mouseX和mouseY動作一起移動。但是，添加按鈕功能（工作）後，表情符號不起作用。這似乎是一個或兩個案例。有沒有辦法我可以重新排序我的代碼，使兩者都有效？

基本上我想要一個與mouseX和mouseY（鼠標的X，Y位置）一起移動的表情符號，並且能夠添加一個按鈕功能，該功能會向表情符號頂部或底部添加一個圓圈，具體取決於按鈕被點擊。我希望表情符號在添加圓圈後仍然可以移動。右側底部的兩個矩形是按鈕。白色圓圈是表情符號，背景是粉紅色的圓圈和粉紅色的空白屏幕。

我嘗試用drawClick內的mouseClicked或drawExmoji內部或外部的各種組合對代碼進行重新排序。但是到目前爲止，我還沒有找到一種能夠提供我所需要的方式的機會。是否有可能使用純粹的JavaScript做到這一點？ TIA

編輯：

• 這裏的鏈接到我的工作我的代碼中。我沒有把它放在jsfiddle中，因爲我不知道如何使用html標籤並向它添加代碼。 https://www.khanacademy.org/computer-programming/spin-off-of-simple-buttons-with-functionsobject-params/4602551803707392

• 至於解釋我想發生什麼，那是在我的文章的第3段？如果還不清楚，請告訴我。

這裏是我到目前爲止的代碼：

var x = 250; 
var y = 300; 
var btnwidth = 100; 
var btnheight = 30; 

//to highlight the button that is pressed 
var highlightbox = function(hix, hiy, hiw, hih) { 
noFill(); 
stroke(56, 247, 8); 
strokeWeight(5); 
rect(hix, hiy, hiw, hih); 
}; 

//outer circle of the emoji face, the idea was for it to move along with the mouse but now it doesn't 
var X = constrain(mouseX, 190, 210); 
var Y = constrain(mouseY, 115, 140); 
var W = 160; 
var H = W; 
var drawEmoji = function() { 
    var X = constrain(mouseX, 190, 210); 
    var Y = constrain(mouseY, 115, 140); 
    var W = 160; 
    var H = W; 
    fill(247, 242, 242); 
    stroke(0, 51, 255); 
    strokeWeight(3); 
    ellipse(X,Y,W,H); 
}; 

//background behind the emoji 
var drawBackground = function() { 
background(250, 187, 187); 
fill(191, 130, 130); 
stroke(255, 0, 0); 
strokeWeight(3); 
ellipse(200,200,400,400); 

fill(247, 207, 247); 
rect(x, y, btnwidth, btnheight); 
fill(173, 207, 250); 
rect(x, y+50, btnwidth, btnheight); 

}; 

drawBackground(); 
drawEmoji(); 

var draw = function() { 
//mouse click function for the button, when it's clicked a circle appears on the emoji 
mouseClicked = function(){ 
    drawBackground(); 
    drawEmoji(); 

    if (mouseX > x && mouseX < (x + btnwidth) && mouseY > y && mouseY < (y + btnheight)) { 
     highlightbox(x, y, btnwidth, btnheight); 
     stroke(68, 0, 255); 
     fill(247, 207, 247); 
     ellipse(X - 49,Y - 50,W/3,H/3); 
    } 
    else if (mouseX > x && mouseX < (x + btnwidth) && mouseY > y + 50 && mouseY < (y + 50 + btnheight)) { 
     highlightbox(x, y + 50, btnwidth, btnheight); 
     stroke(68, 0, 255); 
     fill(173, 207, 250); 
     ellipse(X+1,Y+100,W/3,H/3); 
    } 

}; 

}; 

Answer 1

這個問題是6個月大，但我注意到你還沒有從你貼什麼改變了這裏的代碼汗;所以我認爲你仍然可能想完成它。

我不會給你特定的代碼來解決它（這是你的工作！），但這裏有一些指針。

首先，您需要將mouseClicked函數移出繪圖函數並完全移除繪圖函數。繪製函數在定義時會連續調用，即使在沒有鼠標動作發生時也適用於動畫。您目前只想在用鼠標進行某些操作時進行繪製。不斷繪製是矯枉過正！

其次，添加一個全局變量來指示是否必須繪製圓，如果是，則頂部或底部。在mouseClicked函數中，您不得繪製圓 - 只需將該變量設置爲應該的值，並調用背景和表情符號的兩個繪製函數即可。

添加mouseMoved函數來調用繪圖函數。

在你繪製表情符的函數中，測試你的全局變量來決定在哪裏繪製圓（或不繪製它）。