Question

好的，所以我试图将HTML表单输入的值推送到JavaScript数组。当我加载页面并通过表单提交值时，它返回数组中的空字符串。我不明白为什么会这样。谢谢你的帮助。

相关HTML：

<form>
                <div class="form-group">
                    <label for="name1">Name: </label>
                    <input type="text" class="form-control b" id="nameone">
                    <label for="pref1">Preferences: </label>
                    <input type="text" class="form-control a" id="prefone"> </div>
                <div class="form-group">
                    <label for="name2">Name: </label>
                    <input type="text" class="form-control c" id="nametwo">
                    <label for="pref2">Preferences: </label>
                    <input type="text" class="form-control a" id="preftwo"> </div>
                <div class="form-group">
                    <label for="name3">Name: </label>
                    <input type="text" class="form-control d" id="namethree">
                    <label for="pref3">Preferences: </label>
                    <input type="text" class="form-control a" id="prefthree"> </div>
                <div class="form-group">
                    <label for="name4">Name: </label>
                    <input type="text" class="form-control e" id="namefour">
                    <label for="pref4">Preferences: </label>
                    <input type="text" class="form-control a" id="preffour"> </div>
                    <!-- ... -->
                    <button type="submit" class="btn btn-primary" id="sbm">Submit</button>
</form>

相关JavaScript：

var table1 = [];
    var table2 = [];
    var table3 = [];
    var table4 = [];
    var names = [];
    var pref = [];

// ...

function namesdefine() {
        names.push(document.getElementById('nameone').value);
        names.push(document.getElementById('nametwo').value);
        names.push(document.getElementById('namethree').value);
        names.push(document.getElementById('namefour').value);
        names.push(document.getElementById('namefive').value);
        names.push(document.getElementById('namesix').value);
        names.push(document.getElementById('nameseven').value);
        names.push(document.getElementById('nameeight').value);
        names.push(document.getElementById('namenine').value);
        names.push(document.getElementById('nameten').value);
        names.push(document.getElementById('nameeleven').value);
        names.push(document.getElementById('nametwelve').value);
        names.push(document.getElementById('namethirteen').value);
        names.push(document.getElementById('namefourteen').value);
        names.push(document.getElementById('namefifthteen').value);
        names.push(document.getElementById('namesixteen').value);
        names.push(document.getElementById('nameseventeen').value);
        names.push(document.getElementById('nameeighteen').value);
        names.push(document.getElementById('namenineteen').value);
        names.push(document.getElementById('nametwenty').value);
        names.push(document.getElementById('nametwentyone').value);
        names.push(document.getElementById('nametwentytwo').value);
        names.push(document.getElementById('nametwentythree').value);
        names.push(document.getElementById('nametwentyfour').value);
        console.log(names);
        var testvar = document.getElementById('nameone').value;
        console.log(testvar);
        console.log("Look here please");
    }
 document.getElementById('sbm').onclick = namesdefine();seat(document.getElementsByClassName('a').value);check();changeHTML();
    console.log(table1);
    console.log(table2);
    console.log(table3);
    console.log(table4);
    console.log("second call");

Answer 1

分配给namesdefine()时，您正在调用.onclick功能。您应该将该功能分配给.onclick，因此请忽略()之后的功能。

document.getElementById('sbm').onclick = namesdefine;

Answer 2

使用：

document.getElementById('sbm').onclick = namesdefine;

或者

document.getElementById('sbm').addEventListener('click', namesdefine);

如果你需要全部打电话，请使用：

document.getElementById('sbm').onclick = function () {
    namesdefine();
    seat(document.getElementsByClassName('a').value);
    check();
    changeHTML();
}

在null

之后检查getElementById()始终是一个好习惯

Answer 3

尝试将数据放入循环中。您可以使用getElementByTagName或getElementByClassName。

var elements = document.getElementsByTagName("input")
for (var i = 0; i < elements.length; i++) {
    //Create array here arr.push(elements[i].value);
}

您可以在点击功能中调用它。希望有所帮助。

HTML表单值不会推送到JavaScript数组

3 个答案: