沒有 Jquery -- 即使我在正文中有腳本，Javascript 也看不到我的 id:s？

Question

當我在 body 標簽中編寫 javascript 時，它在我的 id:s 上返回 null。 如果我在 javascript 中創建元素，它會找到 id 但當我在 body(html) 中創建它時卻找不到。 如果我用 JQuery 編寫它會發現它。 但是如果我的測試出現它，我想用普通的 javascript 編寫它。 這令人沮喪。 我嘗試加載窗口並將代碼放在 body 標簽下，但它沒有用。 我知道代碼找不到它，因為它認為它不是創建的，但是我如何讓代碼看到我已經創建了例如 html 中的 div？

 document.getElementById("#btn").addEventListener("click", function () { var obj = { FirstName: document.getElementBydId("#firstName").value, LastName: document.getElementBydId("#lastName").value, Address: document.getElementBydId("#address").value, Phone: document.getElementBydId("#phone").value, Zip: document.getElementBydId("#zip").value, }; txtToDiv(obj); }); function txtToDiv(obj) { var d = getElementById("#d"); d.innerHtml = obj.LastName + " " + obj.FirstName + "<br>" + obj.Zip + " " + obj.Address + "<br>" + obj.Phone };

 .container{ margin: auto;background-color: lightgrey;width: 500px;height: 400px;}

 <div class="container"> Förnamn: <input id="firstName"/> Efternamn: <input id="lastName"/><br/> Zip: <input id="zip"/> adress: <input id="address"/><br/> Telefon: <input id="phone"/><br/> <button id="btn">Flytta</button> </div> <div id="d"></div>

Answer 1

 document.getElementById("btn").addEventListener("click", function() { var obj = { FirstName: document.getElementById("firstName").value, LastName: document.getElementById("lastName").value, Address: document.getElementById("address").value, Phone: document.getElementById("phone").value, Zip: document.getElementById("zip").value, }; txtToDiv(obj); }); function txtToDiv(obj) { var d = document.getElementById("d"); d.innerHTML = obj.LastName + " " + obj.FirstName + "<br>" + obj.Zip + " " + obj.Address + "<br>" + obj.Phone };

 <div class="container"> Förnamn: <input id="firstName"/> Efternamn: <input id="lastName"/><br/> Zip: <input id="zip"/> adress: <input id="address"/><br/> Telefon: <input id="phone"/><br/> <button id="btn">Flytta</button> </div> <div id="d"></div>

Answer 2

您的代碼中有很多錯別字，而且，要通過 id 選擇一個元素，不需要#因為document.getElementById()已經通過其 id 查找了一個元素。您可以通過選擇容器中的所有inputs來讓您的生活更輕松並使用它們的 id 作為屬性名稱。 所以你不需要多次硬編碼所有東西。 在您的txtToDiv函數中，您還可以循環遍歷傳遞的對象屬性。

 document.getElementById("btn").addEventListener("click", function () { var obj = {}; Array.prototype.forEach.call(document.querySelectorAll(".container input"), function(e) { obj[e.id] = e.value; }); txtToDiv(obj); }); function txtToDiv(obj) { var d = document.getElementById("d"); d.innerHTML = Object.keys(obj).map(function(v) { return obj[v]; }).join(" "); };

 .container{ margin: auto;background-color: lightgrey;width: 500px;height: 400px;}

 <div class="container"> Förnamn: <input id="firstName"/> Efternamn: <input id="lastName"/><br/> Zip: <input id="zip"/> adress: <input id="address"/><br/> Telefon: <input id="phone"/><br/> <button id="btn">Flytta</button> </div> <div id="d"></div>

Answer 3

將您的 javascript 代碼封裝在

window.onload = function(){
    // your code goes here
}

也使用document.getElementByID('myId')而不是#myId