.valueで入力から値を取得できません

Question

なぜ値が機能しないのか分かりません。また、.getElementByIdではなく.querySelectorを試しましたが、コンソールでは定義されていません。

var submit = document.querySelector('#submit'); 
 
var name = document.getElementById('ship-name'); 
 

 
submit.onclick = function() { 
 
    console.log(name.value); 
 
};

<div class="box"> 
 
    <h2>Where do you want your stuff sent?</h2> 
 
    <label for="ship-name"> 
 
    <input class="full text-input" id="ship-name" type="text" placeholder="Name" required> 
 
    </label> 
 
    <label for="ship-add-1"> 
 
    <input class="full text-input" id="ship-add-1" type="text" placeholder="Address Line 1" required> 
 
    </label> 
 
    <label for="ship-add-2"> 
 
    <input class="full text-input" id="ship-add-2" type="text" placeholder="Address Line 2" required> 
 
    </label> 
 
    <label for="ship-add-3"> 
 
    <input class="full text-input" id="ship-add-3" type="text" placeholder="Address Line 3" required> 
 
    </label> 
 
    <label for="ship-4"> 
 
    <input class="full text-input" id="ship-add-4" type="text" placeholder="Address Line 4" required> 
 
    </label> 
 
</div>

Answer 1

ありがとうございました。 David Hの答えが問題を解決しました。変数名を別のものに変更しただけで機能しました。彼はあなたがグローバルスコープで名前と呼ばれる変数を持つことができないということは間違いありませんでした。

Answer 2

あなたは試したことがありますか？

var name = $('#ship-name').val(); 

そして

console.log(name); 

Answer 3

変更あなたの.jsファイル内のコードはすべき：

document.getElementById('submit').onclick = function() { 
console.log(document.getElementById('ship-name').value); 
} 

あなたがグローバル空間を悪用されたコメントで述べたように。

また、参照しているHTMLの後にスクリプトを含めてください。