javascript - 如何在输出结果之前单击按钮？

Question

所以有 2 个单选项目，我希望用户选择执行哪一个，用户选择其中一个后，他/她将点击按钮“绘制！” 并将从他们选择的收音机项目的功能之一输出结果。但我不知道如何调用这两个函数并等到用户点击“Draw！” 按钮实际调用该函数。

我的 HTML 中有：

<p>
Do you want to <input type="radio" name="draw" id="draw" value="drawTriangle">Draw Triangle
or
<input type="radio" name="draw" id="draw" value="drawZigZag">Draw ZigZag<br>
<input type="button" value="Draw!" onclick="drawEither()">
</p>

<pre id="outputTriangle">
</pre>

<pre id="outputZigZag">
</pre>

和 Javascript：

function makeZigZag () {
var sizeTextField = document.getElementById('sizeTextField')
//block of codes
drawButton.onclick = function () {
    outputTri.innerHTML = makeTriangle(sizeTextField.value);
};

}

function makeTriangle () {
var sizeTextField = document.getElementById('sizeTextField')
//block of codes
drawButton.onclick = function () {
    outputZZ.innerHTML = makeTriangle(sizeTextField.value);
};
}

function drawEither () {
outputTri = document.getElementById('outputTriangle');
outputZZ = document.getElementById('outputZigZag');
}

Answer 1

一种方法是循环检查选择了哪个单选按钮。就像是：

function drawEither () {
  if (document.getElementById('drawTriangle').checked) {
    do stuff for radio 1
  } else {
    do stuff for radio 2
  }
}

顺便说一句，您的示例 HTML 中有重复的 ID。ID 必须是唯一的。我在示例中使用了建议的 ID。