いいえJquery - Javascriptは私の身分証明書を見ることができません。

Question

bodyタグにjavascriptを書くと、自分のid：sにnullが返されます。 javascriptで要素を作成した場合、body（html）にidを作成しても作成されません。私が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>

0123あなたのコードでかなりの誤植があり

Answer 2

はまた、代わりにdocument.getElementByID('myId')を使用

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

であなたのjavascriptのコードをカプセル化することをお勧めし#myId

Answer 3

は、また、内のすべてのinputsを選択することで、あなたはあなたの人生を容易にすることができます。.. document.getElementById()はすでにそのIDで要素を探しますように必要な一切#ありませんidで要素を選択しますそれらの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>