すべての商品を追加して表示するJavascriptで表示

-1

Javascriptで送信ボタンが付いたリストを作成しようとしています。項目が入力されると、前に入力された項目の下に表示されます。これまでのところ私が入れたものは、前のものに取って代わるものです。どんな方向にも大いに感謝しますすべての商品を追加して表示するJavascriptで表示

出典

2016-05-14 Vincent Williams

あなたが試みている何のためにいくつかのコードを表示することができますか？ –

それはそのままです。次の例を考えてみましょう：

<html> 
<input id="name"></input> 
<label id="nameDisplay"></label> 
<input id="place"></input> 
<label id="placeDisplay"></label> 
<button onclick="display()">Click</button> 
</html> 

<script> 
function display(){ 
    name = document.getElementById('name').value; 
    place= document.getElementById('place').value; 
    document.getElementById('nameDisplay').innerHTML = name; 
    document.getElementById('placeDisplay').innerHTML = place; 
} 
</script>

ここで、「innerHTML」はあなたの質問に使用される強力な武器です！これにより、前のコードが消去され、現在の値のみが表示されます。

First name: 
<input type="text" id="firstname"> 
<br> 
<p>Your first name is: <b id='boldStuff2'></b> 
</p> 
<p>Other people's names:</p> 
<ol id="demo"></ol> 
<input type='button' onclick='changeText2()' value='Submit' />

とJS：

var list = document.getElementById('demo'); 

function changeText2() { 
    var firstname = document.getElementById('firstname').value; 
    document.getElementById('boldStuff2').innerHTML = firstname; 
    var entry = document.createElement('li'); 
    entry.appendChild(document.createTextNode(firstname)); 
    list.appendChild(entry); 
}

出典

2016-05-14 02:22:37

私は、OPがリストをそれぞれのプレスで成長し続けることを望んでいると思います。これにより、最初のエントリのみが作成されます。 –

ああ..素晴らしい！ appendChild（）が最適なソリューションでなければなりません！ –

は、あなたが探しているものです。さらに、submitイベントのおかげで、[送信]ボタンをクリックするか、Enterキーを押します。

ul = document.getElementById("ul"); 
 
form = document.getElementById("form"); 
 
div = document.createElement("div"); 
 
form.elements.text.focus(); 
 

 
form.addEventListener("submit", function (ev) { 
 
    var textEl = this.elements.text; 
 
    ul.appendChild(makeLI(textEl.value)); 
 
    textEl.value = ""; 
 
    ev.preventDefault(); 
 
}); 
 

 
function makeLI (content) { 
 
    div.innerHTML = "<ul><li>" + content + "</li></ul>"; 
 
    return div.firstChild.firstChild; 
 
}

<form action="" id="form"> 
 
    <p> 
 
    <input type="text" name="text" /> 
 
    <input type="submit" /> 
 
    </p> 
 
</form> 
 
<ul id="ul"></ul>

出典

2016-05-14 02:23:23 MeisterAjit

.appendChild()を使用すると、あなたの問題を解決する必要があります>

OPEN for DEMO

HTMLコード - ここ

出典

2016-05-14 05:34:25 Edouard

すべての商品を追加して表示するJavascriptで表示

答えて

関連する問題