如何從選擇標記中的值打印項目符號列表

我正在使用innerHTML練習打印到html頁面。我試圖從選擇標記中使用項目符號列表打印ID爲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>

來源

2017-04-08 MusicGirl

您正在使用innerHtml並傳遞一個HTML元素「x」。與'innerText'不同，'innerHTML'不會設置字符串，而是將它作爲純文本或轉義的HTML傳遞，但作爲實際的HTML被視爲HTML。這就是爲什麼你得到：'[object HTMLSelectElement]'而不是你看到的打印到控制檯的值 - 因爲在你的console.log（）中調用你傳遞的'x.value'而不是'x'。

您的'document.getElementById（「fruitSelect」）'返回'[object HTMLSelectElement]'，它是頁面DOM中的一個元素，而不僅僅是元素的'值'。該元素具有屬性，其中一個屬性爲'value'，正如console.log（x.value）調用中可以看到的那樣。

我的建議是，讓您的<p>標籤<ul>標籤，然後添加<li>標籤與內選定元素的「價值」，以建設子彈點列表，你正在尋求做。

在下面的示例中，我已經放置了原來的'打印'功能進行比較，添加了兩個變體，並將標記爲<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>

來源

2017-04-08 22:15:27 dylansweb

的「setAsList」功能和「addToList（）」之間的差別是僅在「.innerHTML」，即的設定中使用的操作者，在使用一方面‘=’設置innerHTML，另一方面，'+ ='用於添加到現有的innerHTML中。 – dylansweb

我相信下面的滿足您的要求：

<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>元素每次 '選擇'按鈕被單擊並將下拉字段的值添加到在將printHere <ul>與此<li>附加之前加上。

來源

2017-04-08 22:12:24 stuartmccoll

它工作得很好。你可以試試這個：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
\t <h3>Pick your fruit to print it to the menu below</h3> 
 
\t <select id="fruitSelect"> 
 
\t \t <option value="banana" >banana</option> 
 
\t \t <option value="strawberry">strawberry</option> 
 
\t \t <option value="apple">apple</option> 
 
\t </select> 
 
\t <p id="printHere"></p> 
 
\t <button type="button" onclick="print()">Select</button> 
 
\t <script> 
 
\t function print(){ 
 
\t  var option = document.getElementById('fruitSelect').querySelectorAll('option'), 
 
\t  \t list = document.createElement("ul"), 
 
\t  \t listItem; 
 
\t \t \t 
 
\t \t for(var i = 0, len = option.length; i < len; i++){ 
 
\t \t \t listItem = document.createElement("li"); 
 
\t \t \t listItem.innerHTML = option[i].innerHTML; 
 
\t \t \t list.appendChild(listItem); 
 
\t \t } 
 
\t  document.getElementById("printHere").innerHTML = list.innerHTML; 
 
\t } 
 
</script> 
 
</body> 
 
</html>

點擊你得到所需的輸出按鈕後。

來源

2017-04-08 22:38:14

如何從選擇標記中的值打印項目符號列表

回答

相關問題