没有 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