HTMLフォームの値がJavaScript配列にプッシュされない

Question

JavaScriptフォームにHTMLフォーム入力の値をプッシュしようとしています。ページをロードしてフォームから値を送信すると、配列に空の文字列が返されます。なぜこれが起こっているのか分かりません。ご協力ありがとうございました。

関連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

はループでデータを取得してください。 getElementByTagNameまたはgetElementByClassNameを使用できます。

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

これをクリック機能で呼び出すことができます。 希望に役立ちます。

Answer 2

.onclickに割り当てると、namesdefine()関数が呼び出されます。関数を.onclickに割り当てる必要がありますので、その後には()を省略してください。

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

Answer 3

のいずれかを使用：

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を確認してください