How to print a bulleted list from the values in a select tag
Question
I'm practicing printing to the html page using innerHTML. I'm trying to get the values from the select tags to print in the paragraph with the id printHere using a bulleted list. So far, i can get the value, but I'm not sure where to go from there.
My html
<!DOCTYPE html>
<html>
<head><title></title><meta charset="UTF-8"></head>
<body>
<h3> Pick your fruit to print it to the menu below</h3>
<select id="fruitSelect">
<option value = "banana" >banana</option>
<option value = "strawberry">strawberry</option>
<option value = "apple">apple</option>
</select>
<p id="printHere"></p>
<button type="button" onclick = "print()">Select</button>
</body>
</html>
And my script
<script>
function print(){
var x = document.getElementById("fruitSelect");
console.log(x.value);//test to see if it works
document.getElementById("printHere").innerHTML=x;
}
</script>
3 answers
solution1
1 ACCPTED 2017-04-08 22:15:27
You are using innerHtml and passing 'x' which is an HTML element. Unlike 'innerText', 'innerHTML' will not set the string you pass it as plain text, or escaped HTML, but as actual HTML, to be treated as HTML. That's why you get: '[object HTMLSelectElement]' instead of the value you see printed to the console - because in your console.log() call your passing 'x.value', rather than just 'x'.
Your 'document.getElementById("fruitSelect")' is returning a '[object HTMLSelectElement]' which is an element in the DOM of your page, not simply the 'value' of the element. This element has properties, one of which is 'value', as can be seen by your console.log(x.value) call.
My suggestion would be to make your <p> tag a <ul> tag, and then add <li> tags with the 'value' of a selected element within, in order to build the bullet-point list as you are seeking to do.
In the example below, I've left your original 'print' function in place for comparison, added two variations, and changed your enclosing <p> tag to a <ul> tag. Run the example, examine the difference between the three functions, and you should get the idea.
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<h3> Pick your fruit to print it to the menu below</h3>
<select id="fruitSelect">
<option value="banana">banana</option>
<option value="strawberry">strawberry</option>
<option value="apple">apple</option>
</select>
<ul id="printHere">
</ul>
<button type="button" onclick="print()">What you had</button>
<button type="button" onclick="setAsList()">Set as selection</button>
<button type="button" onclick="addToList()">Add to selection</button>
<script>
function print() {
var x = document.getElementById("fruitSelect");
console.log(x.value);//test to see if it works
document.getElementById("printHere").innerHTML = x;
}
function setAsList(){
var x = document.getElementById("fruitSelect");
console.log(x.value);//test to see if it works
document.getElementById("printHere").innerHTML = "<li>" + x.value + "</li>";
}
function addToList() {
var x = document.getElementById("fruitSelect");
console.log(x.value);//test to see if it works
document.getElementById("printHere").innerHTML += "<li>" + x.value + "</li>";
}
</script>
</body>
</html>
solution2
0 2017-04-08 22:12:24
I believe the following meets your requirements:
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<h3> Pick your fruit to print it to the menu below</h3>
<select id="fruitSelect">
<option value = "banana" >banana</option>
<option value = "strawberry">strawberry</option>
<option value = "apple">apple</option>
</select>
<ul id="printHere">
</ul>
<button type="button" onclick = "print()">Select</button>
</body>
</html>
<script>
function print() {
var x = document.getElementById("fruitSelect");
var node = document.createElement("li");
var textNode = document.createTextNode(x.value);
node.appendChild(textNode);
document.getElementById("printHere").appendChild(node);
}
</script>
This creates a new <li> element each time the 'Select' button is clicked and adds the value of the dropdown field to the <li> before appending the printHere <ul> with this <li> .
solution3
0 2017-04-08 22:38:14
It works very fine. You can try this:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> </head> <body> <h3>Pick your fruit to print it to the menu below</h3> <select id="fruitSelect"> <option value="banana" >banana</option> <option value="strawberry">strawberry</option> <option value="apple">apple</option> </select> <p id="printHere"></p> <button type="button" onclick="print()">Select</button> <script> function print(){ var option = document.getElementById('fruitSelect').querySelectorAll('option'), list = document.createElement("ul"), listItem; for(var i = 0, len = option.length; i < len; i++){ listItem = document.createElement("li"); listItem.innerHTML = option[i].innerHTML; list.appendChild(listItem); } document.getElementById("printHere").innerHTML = list.innerHTML; } </script> </body> </html>
After clicking the button you get The desired output.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.