これをコード化する良い方法がありましたか？（初心者）

-1

注：jqueryや他のライブラリではなく、javascriptの使い方を学びたいと思っています。これをコード化する良い方法がありましたか？（初心者）

私はjavascriptを使い慣れていません。これはどのように動作するのかを知りたいので、これをより効率的にコーディングする方法があるかどうかを知りたがっています。

function myFunction() { 
 
    var domObject = document.createElement("li"), 
 
     userName = document.getElementById("userName").value, 
 
     userNameText = document.createTextNode(userName); 
 

 
    domObject.appendChild(userNameText); 
 
    document.getElementById("myList").appendChild(domObject); 
 
    document.getElementById("userName").value = ""; 
 
}

<body> 
 
    <input type="text" id="userName"> 
 
    <button onclick="myFunction()">Click</button> 
 
    <ul id="myList"> 
 
     <li>this is</li> 
 
     <li>just a</li> 
 
     <li>test to</li> 
 
     <li>append children</li> 
 
    </ul> 
 
    <script src="main.js"></script> 
 
</body>

出典

2017-08-06 CMYK

それが動作するコードのピアレビューの要求であるので、私は、オフトピックとして、この質問を閉じるために投票しています。代わりに[codereview.se]に適しています。 –

domObject確かに、変数のための最高の名ではありません（でもmyFunctionです）。とにかく、代わりにインラインでイベントリスナーのaddEventListenerを使用します。

// you can, of course, use getElementById with an ID attribute 
 
var input = document.querySelector('input'); 
 
var button = document.querySelector('button'); 
 
var list = document.querySelector('ul'); 
 

 
button.addEventListener('click', function() { 
 
    var li = document.createElement('li'); 
 
    li.textContent = input.value; 
 
    input.value = ''; 
 
    list.appendChild(li); 
 
});

<input type="text"> 
 
<button>Add to list</button> 
 
<ul></ul>

出典

2017-08-06 10:45:43 PeterMader

これをコード化する良い方法がありましたか？ （初心者）

答えて

関連する問題

これをコード化する良い方法がありましたか？（初心者）