Question

我试图制作一个javascript代码，该代码从一个输入字段获取值并使用相同的类更改所有其他输入，如果选中相应的复选框。 javascript位于底部，但仍然可以获得所有3个按钮：

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;在change_numbr

有什么建议吗？

代码：

<form>
    <fieldset>
            <label for="check1">Check</label>
            <input id="check1" type="checkbox" class="chkbox">           
            <label for="number1">Number</label>
            <input id="number1" type="text" class="numbr" value="324">
            <button type="button" onClick="change_numbr('numbr1')">click</button>
    </fieldset>
    <fieldset>
            <label for="check2">Check</label>
            <input id="check2" type="checkbox" class="chkbox">           
            <label for="number2">Number</label>
            <input id="number2" type="text" class="numbr" value="85">
            <button type="button" onClick="change_numbr('numbr2')">click</button>
    </fieldset>
    <fieldset>
            <label for="check3">Check</label>
            <input id="check3" type="checkbox" class="chkbox">           
            <label for="number3">Number</label>
            <input id="number3" type="text" class="numbr" value="3">
            <button type="button" onClick="change_numbr('numbr3')">click</button>
    </fieldset>
</form>

代码：

<script type="text/javascript">
function change_numbr(selected_numbr) {
    var value_numbr = document.getElementById(selected_numbr).value;
    var total_numbr = document.getElementsByClassName("numbr");
    var i;
    for (i = 0; i < total_numbr.length; i++) {
    if (document.getElementById(check[i]).checked) {
        document.getElementById(number[i]).value = value_numbr;

         }
    }
}
</script>

Answer 1

我认为这就是你要找的东西：

＆＃13;

function change_numbr(selected_numbr) {

    var value_numbr = document.getElementById(selected_numbr).value;
    var total_numbr = document.getElementsByClassName("numbr");
    var i;
    for (i = 1; i < total_numbr.length; i++) {
    if (document.getElementById("check"+i).checked) {
        document.getElementById("label"+i).innerHTML  = value_numbr;

         }
    }
}

＆＃13;

<form>
    <fieldset>
            <label for="check1">Check</label>
            <input id="check1" type="checkbox" class="chkbox">           
            <label id="label1" for="number1">Number</label>
            <input id="number1" type="text" class="numbr" value="324">
            <button type="button" onClick="change_numbr('number1')">click</button>
    </fieldset>
    <fieldset>
            <label for="check2">Check</label>
            <input id="check2" type="checkbox" class="chkbox">           
            <label id="label2" for="number2">Number</label>
            <input id="number2" type="text" class="numbr" value="85">
            <button type="button" onClick="change_numbr('number2')">click</button>
    </fieldset>
    <fieldset>
            <label for="check3">Check</label>
            <input id="check3" type="checkbox" class="chkbox">           
            <label id="label1" for="number3">Number</label>
            <input id="number3" type="text" class="numbr" value="3">
            <button type="button" onClick="change_numbr('number3')">click</button>
    </fieldset>
</form>

＆＃13;

将来尝试澄清变量名称以获得更干净的可重复代码，询问您是否有任何疑问。：）

Answer 2

您需要使用字符串，integer未定义。类似的东西：

check

同样适用于数字：

document.getElementById('check'+i).checked)

Answer 3

DOM中不存在ID numbr1，numbr2，numbr3。我认为您将错误的ID传递给代码中的函数change_numbr（）。

但我认为这只是一个问题。

Answer 4

我改变你的代码并且它有效。

这是我测试的代码。

    <html>
<head>
    <title></title>
    <script type="text/javascript">
function change_numbr(selected_numbr) {
    alert('ciaoooo');
    var value_numbr = document.getElementById(selected_numbr).value;
    console.log(value_numbr);
    var total_numbr = document.getElementsByClassName("numbr");
    console.log(value_numbr.length);
    var i;
    for (i = 1; i < total_numbr.length; i++) {
    if (document.getElementById('check' + i).checked) {
        document.getElementById('number' + i).value = value_numbr;

         }
    }
}
</script>

</head>
<body>
    <form>
    <fieldset>
            <label for="check1">Check</label>
            <input id="check1" type="checkbox" class="chkbox">           
            <label for="number1">Number</label>
            <input id="number1" type="text" class="numbr" value="324">
            <button type="button" onClick="change_numbr('number1')">click</button>
    </fieldset>
    <fieldset>
            <label for="check2">Check</label>
            <input id="check2" type="checkbox" class="chkbox">           
            <label for="number2">Number</label>
            <input id="number2" type="text" class="numbr" value="85">
            <button type="button" onClick="change_numbr('number2')">click</button>
    </fieldset>
    <fieldset>
            <label for="check3">Check</label>
            <input id="check3" type="checkbox" class="chkbox">           
            <label for="number3">Number</label>
            <input id="number3" type="text" class="numbr" value="3">
            <button type="button" onClick="change_numbr('number3')">click</button>
    </fieldset>
</form>


</body>
</html>

查看旧代码的不同之处。

Answer 5

我认为这就是你所需要的。

function change_numbr(selected_numbr) {
    var value_numbr = document.getElementById(selected_numbr).value;
    var total_numbr = document.getElementsByClassName("numbr");
    var i;
    for (i = 1; i <= total_numbr.length; i++) {
    if (document.getElementById('check'+i).checked) {
        document.getElementById('number'+i).value = value_numbr;
         }
    }
}

<form>
    <fieldset>
            <label for="check1">Check</label>
            <input id="check1" type="checkbox" class="chkbox">           
            <label for="number1">Number</label>
            <input id="number1" type="text" class="numbr" value="324">
            <button type="button" onclick="change_numbr('number1')">click</button>
    </fieldset>
    <fieldset>
            <label for="check2">Check</label>
            <input id="check2" type="checkbox" class="chkbox">           
            <label for="number2">Number</label>
            <input id="number2" type="text" class="numbr" value="85">
            <button type="button" onclick="change_numbr('number2')">click</button>
    </fieldset>
    <fieldset>
            <label for="check3">Check</label>
            <input id="check3" type="checkbox" class="chkbox">           
            <label for="number3">Number</label>
            <input id="number3" type="text" class="numbr" value="3">
            <button type="button" onclick="change_numbr('number3')">click</button>
    </fieldset>
</form>

更改复选框选中的值（循环不工作）

5 个答案: