Question

我正在使用innerHTML练习打印到html页面。我正在尝试使用项目符号列表从标记printHere的段落中打印选择标记中的值。到目前为止，我可以获得价值，但我不确定从那里开始。

我的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>

我的剧本

<script>
function print(){
    var x = document.getElementById("fruitSelect");
    console.log(x.value);//test to see if it works
    document.getElementById("printHere").innerHTML=x;
}
</script>

Answer 1

您正在使用innerHtml并传递＆＃39; x＆＃39;这是一个HTML元素。与内心文字＆＃39;内部HTML＆＃39;不同。不会将您传递给它的字符串设置为纯文本或转义HTML，而是将其作为实际HTML来设置为HTML。这就是你得到的原因：＆＃39; [object HTMLSelectElement]＆＃39;而不是你看到打印到控制台的值 - 因为在你的console.log（）中调用你的传递＆＃39; x.value＆＃39;而不仅仅是＆＃39; x＆＃39;。

您的＆＃39; document.getElementById（＆＃34; fruitSelect＆＃34;）＆＃39;正在返回＆＃39; [对象HTMLSelectElement]＆＃39;这是您网页DOM中的一个元素，而不仅仅是＆＃39;值＆＃39;元素。此元素具有属性，其中一个属性为＆＃39; value＆＃39;，可以通过console.log（x.value）调用看到。

我的建议是将您的<p>代码设为<ul>代码，然后添加<li>代码，其中包含＆＃39;值＆＃39;选择元素的内容，以便按照您的目的建立项目符号列表。

在下面的示例中，我已经将您原始的＆＃39; print＆＃39;功能就位以进行比较，添加了两个变体，并将封闭的<p>标记更改为<ul>标记。运行示例，检查三个函数之间的差异，你应该明白这个想法。

<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>

Answer 2

我相信以下内容符合您的要求：

<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>

每次点击“选择”按钮时，这会创建一个新的<li>元素，并在将<li>附加到此<ul>之前将下拉字段的值添加到<li> Rows = 750 Columns = 256 1}}。

Answer 3

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.

如何从select标记中的值打印项目符号列表

3 个答案: