单选按钮在单击提交后未生成操作

Question

我正在为我的应用程序创建一个简单的帮助页面。在其中，您将获得有关如何导航和使用该网站的一些基本文档。对于每个谈话点，我添加了一个简单的问卷("这有帮助吗？"(，用户单击单选按钮(是或否(，并根据他们的选择生成一个操作。我能够成功地将一个添加到第一个谈话点(见片段(，但是当我尝试将其添加到其他人时，它不起作用，因为当我选择"否"时，文本区域不会出现，如果用户选择"是"，也不会得到响应(见片段(。我给了第二个它自己的ID，它仍然不会生成操作。 有人可以告诉我我做错了什么吗？

<div>
<form id="myForm">
<h4> This is the first one I was able to implement.</h4>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios" value="yes">
<label class="custom-control-label" for="defaultGroupExample1">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios" value="no">
<label class="custom-control-label" for="defaultGroupExample2">No</label>
</div>
<input class="button" type="button" name="groupOfDefaultRadios" value="Submit">
</form>
</div>
<div id="result" style="display:none"></div>

<div>
<form id="myForm">
<h4> This one does not work</h4>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample3" name="groupOfDefaultRadios" value="yes">
<label class="custom-control-label" for="defaultGroupExample2">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample4" name="groupOfDefaultRadios" value="no">
<label class="custom-control-label" for="defaultGroupExample3">No</label>
</div>
<input class="button" type="button" name="groupOfDefaultRadios" value="Submit">
</form>
</div>
<div id="result" style="display:none"></div>


<script>
let button = document.querySelector("input.button");
button.addEventListener("click", question1);
function question1() {
var selection = document.querySelector("input[name='groupOfDefaultRadios']:checked");
var result = document.getElementById("result");
if (selection.value == 'yes') {
result.innerHTML = "We're glad you found this helpful.";
result.style.display = "block";
} else {
var output = "";
output += "We're sorry! Please tell us how we can better serve you.<br />";
output += "<textarea style='width: 500px; height 200px;'></textarea><br />";
output += "<button>Submit</button>";
result.innerHTML = output;
result.style.display = "block";
}
}

</script>

Answer 1

document.querySelector((; 函数仅返回第一个元素匹配项，因此事件侦听器仅附加到第一个按钮。请尝试以下代码：

let buttons = document.querySelectorAll("input.button");
buttons.forEach(function (button){
button.addEventListener("click", question1);
});

Answer 2

您的表单具有相同的id，并且您仅将eventListener分配给页面上找到的第一个按钮元素。与.querySelector()相反，.querySelectorAll()查找页面上符合查询的所有元素。

也因为input buttons是完全相同的(id、class等(我使用了不同的方法来获得通缉radio buttons......通过找出点击button的parent，我们可以在该parent中找到radio buttons。

---

编辑：OP询问是否可以为每个表单分别显示响应和文本区域。

第一个更改是消除页面上具有相同id的多个元素(两个结果div具有相同的id(。如果确实有必要让两者具有相同的标识符，那么具有相同的class将是有意义的，而不是id。出于此示例的目的，我们将为每个结果div添加不同的id，并使id与其form的id相关联(例如formid 是myForm1，而它各自的结果div可以有一个像myForm1Result这样的id(。

---

在下面尝试一下：

let button = document.querySelectorAll("input.button");
button.forEach(function(elem) {
elem.addEventListener("click", question1);
});
function question1() {
let parent = this.parentElement;
let parentId = parent.id;
let resultDivId = parent.id + "Result";
let radioBtns = parent.querySelectorAll('input[type="radio"]');
let yesIsChecked = false;

// find out which one is checked
for(let i=0; i < radioBtns.length; i++) {
let radio = radioBtns[i];
if(radio.value == "yes" && radio.checked) {
yesIsChecked = true;
}
}

let result = document.getElementById(resultDivId);
if (yesIsChecked) {
result.innerHTML = "We're glad you found this helpful.";
result.style.display = "block";
} else {
let output = "";
output += "We're sorry! Please tell us how we can better serve you.<br />";
output += "<textarea style='width: 500px; height 200px;'></textarea><br />";
output += "<button>Submit</button>";
result.innerHTML = output;
result.style.display = "block";
}
}

<div>
<form id="myForm1">
<h4> This is the first one I was able to implement.</h4>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios" value="yes">
<label class="custom-control-label" for="defaultGroupExample1">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios" value="no">
<label class="custom-control-label" for="defaultGroupExample2">No</label>
</div>
<input class="button" type="button" name="groupOfDefaultRadios" value="Submit">
</form>
</div>
<div id="myForm1Result" style="display:none"></div>
<div>
<form id="myForm2">
<h4> This one does not work</h4>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample3" name="groupOfDefaultRadios" value="yes">
<label class="custom-control-label" for="defaultGroupExample2">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultGroupExample4" name="groupOfDefaultRadios" value="no">
<label class="custom-control-label" for="defaultGroupExample3">No</label>
</div>
<input class="button" type="button" name="groupOfDefaultRadios" value="Submit">
</form>
</div>
<div id="myForm2Result" style="display:none"></div>