将所选项目附加到列表

Question

I want to create a dropdown box with a few items. Once the user selects the item and clicks the '+' button, the item is added below to a 'basket' section. They should be able to add multiple items over and over.

 document.getElementById("button").onclick = function() { var a = document.getElementById("selection"); var item = a.options[a.selectedIndex].text; document.getElementById("basket").innerHTML = item; var counter = 1; while (counter <= 1) { var list = document.write(item); counter++; } }

 <h1>Select your items!</h1> <form id="myForm"> <p>Item: <select id="selection"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select> <button id="button">+</button></p> </form> <br><br><br> <h1>Basket</h1> <p id="basket"></p>

When the button is pressed, all current content disappears and the item selected appears on its own.

Answer 1

The button in the form has no type="button" . Therefore it is used as submit button and that's why you get the blank page.

You don't need a loop.

Example

 var button = document.getElementById("button"); var select = document.getElementById("select"); var basket = document.getElementById("basket"); // Add text function addToBasket() { var li = document.createElement("li"); li.innerHTML = select.options[select.selectedIndex].text; basket.appendChild(li); } button.addEventListener("click", addToBasket);

 <h1>Select your items!</h1> <form id="myForm"> <p>Item: <select id="select"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select> <button id="button" type="button">+</button></p> </form> <h1>Basket</h1> <ul id="basket"></ul>

Answer 2

You are not concatenating them. document.getElementById("basket").innerHTML = item; removes everything in the basket and add only the selected one.

Use this to concatenate the new item with what already exists in the basket document.getElementById("basket").innerHTML += item; . You can style it to make the basket look nice.