如何解决如何在同一类的html中多次使用同一函数？
我在html中两次使用相同的功能时遇到麻烦。我正在使用类标记，如下所示，并且handNextButtonClick（）函数只能运行一次。如何多次使用此功能？我将在下面发布我的html和javascript代码。
<section >
how many times do you want to buy on scale?
<input type = "number" style = "height : 20px ; width: 50px; " class = "scale-count" />
<button type = "button" onclick = "handleNextButtonClick()" style = "padding : 4px
19px;">
Next
</button>
<div class = "question-two"> </div>
how many times do you want to buy on scale?
<input type = "number" style = "height : 20px ; width: 50px; " class = "scale-count" />
<button type = "button" onclick = "handleNextButtonClick()" style = "padding : 4px 19px;">
Next
</button>
<div class = "question-two"> </div>
</section>
function getNumberOfScales(){
const temp = parseInt(document.querySelector(".scale-count").value);
const numberOfScales = isNaN(temp) || temp<0 ? 0 : temp;
return numberOfScales; }
function rowGenerator(index){
return `
<div class = "row" data-index = "${index}">
    Price ${index} :   <input class = "price" style = "height : 30px ; width:
50px;"
data-index = "${index}" type = "number" />   Count :  
<input class = "count" style = "height : 30px ; width: 50px;" data-index = "${index}" type =
"number" />
</div> `;
}
function handleNextButtonClick() {
const numberOfScales = getNumberOfScales();
const questionTwo = document.querySelector(".question-two");
let stringBuffer = " ";
for (let index=1; index<=numberOfScales; index++){
stringBuffer += rowGenerator(index);
}
questionTwo.innerHTML = stringBuffer;
}
解决方法
您遇到的问题主要是由于模棱两可。当您调用方法并尝试读取/更新控件（文本框等）中的值时，您需要能够明确标识要处理的控件。
在您的代码中，您有两个输入，每个输入由“ scale-count”类“标识”。当您尝试从每个值中检索值时，请执行css搜索（querySelector），以查找具有该类的控件（即querySelector（“。scale-count”））。但是，您尚未指定要使用的控件中的哪一个-因此浏览器将返回找到的第一个控件。因为两个按钮都使用相同的代码，所以得到的结果是相同的-即第一个（即提问者）输入控件。
输出内容也是如此-您在两个div上都使用“ .question-two”，这意味着您在该类中获得了第一个，结果就在那里。
Sandeep提供了一个有效的解决方案-但是它使用“相对寻址”来找到您的控件。虽然有效-这可能意味着添加新字段可能会引起问题。
有很多方法可以解决此问题。例如，您可以将需要处理的元素名称（例如handleNextButtonClick（'txtQuestion1'，'divQuestion1'））传递给“ handleNextButtonClick（）”方法-然后您需要命名每个元素（例如等）
不过，最简单的方法可能是用div包围每个问题，为每个div提供一个唯一的类或id，然后将div的名称传递给您的方法。这样，对于每个呼叫，您都将包装DIV类包含在选择器中，以确保您获得属于适用问题的控件。
<section >
<div class="Question1">
how many times do you want to buy on scale?
<input type = "number" style = "height : 20px ; width: 50px; " class = "scale-count" />
<button type = "button" onclick = "handleNextButtonClick('Question1')" style = "padding : 4px
19px;">
Next
</button>
<div class = "form-output"> </div>
</div>
<div class="Question2">
how many times do you want to buy on scale?
<input type = "number" style = "height : 20px ; width: 50px; " class = "scale-count" />
<button type = "button" onclick = "handleNextButtonClick('Question2')" style = "padding : 4px 19px;">
Next
</button>
<div class = "form-output"> </div>
</div>
</section>
<script>
function getNumberOfScales(parent) {
const temp = parseInt(document.querySelector("." + parent + " .scale-count").value);
const numberOfScales = isNaN(temp) || temp<0 ? 0 : temp;
return numberOfScales;
}
function rowGenerator(index){
return `
<div class = "row" data-index = "${index}">
    Price ${index} :   <input class = "price" style = "height : 30px ; width: 50px;"
data-index = "${index}" type = "number" />   Count :  
<input class = "count" style = "height : 30px ; width: 50px;" data-index = "${index}" type =
"number" />
</div> `;
}
function handleNextButtonClick(parent) {
const numberOfScales = getNumberOfScales(parent);
const formOutput = document.querySelector("." + parent + " .form-output");
let stringBuffer = " ";
for (let index=1; index<=numberOfScales; index++){
stringBuffer += rowGenerator(index);
}
formOutput.innerHTML = stringBuffer;
}
</script>
这是新的“ getAverage”功能的代码更改。 *。$ {parent} *是关键部分。
const row_price = document.querySelector(`.${parent} input.price[data-index = '${index}']`).value ;
const row_count = document.querySelector(`.${parent} input.count[data-index = '${index}']`).value ;
欢迎堆栈溢出！
我接受了您的代码并对其进行了一些改进。这是更新的代码
<section >
how many times do you want to buy on scale?
<input type = "number" style = "height : 20px ; width: 50px; " class = "scale-count" />
<button type = "button" onclick = "handleNextButtonClick(this)" style = "padding : 4px
19px;">
Next
</button>
<div class = "question-two"> </div>
how many times do you want to buy on scale?
<input type = "number" style = "height : 20px ; width: 50px; " class = "scale-count" />
<button type = "button" onclick = "handleNextButtonClick(this)" style = "padding : 4px 19px;">
Next
</button>
<div class = "question-two"> </div>
</section>
// you dont need this function.
function getNumberOfScales() {
const temp = parseInt(document.querySelector(".scale-count").value);
const numberOfScales = isNaN(temp) || temp < 0 ? 0 : temp;
return numberOfScales;
}
function rowGenerator(index) {
return `
<div class = "row" data-index = "${index}">
    Price ${index} :   <input class = "price" style = "height : 30px ; width:
50px;"
data-index = "${index}" type = "number" />   Count :  
<input class = "count" style = "height : 30px ; width: 50px;" data-index = "${index}" type =
"number" />
</div> `;
}
function handleNextButtonClick(btn) {
// btn object will help you to access other element on the DOM.
const numberOfScales = btn.previousElementSibling.value < 0 ? 0 : btn.previousElementSibling.value;
const questionTwo = document.querySelector(".question-two");
let stringBuffer = " ";
for (let index = 1; index <= numberOfScales; index++) {
stringBuffer += rowGenerator(index);
}
btn.nextElementSibling.innerHTML = stringBuffer;
}
这是一个小的demo
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
