如何獲取選定的文本並顯示它們？

我想要做的是從每個選擇框中選取選項，單擊「提交」並將它們存儲在「存儲」段落中。如何獲取選定的文本並顯示它們？

這裏是我的HTML：

<body> 

<div id="container"> 
<button id="button" onclick="rolldices()">Roll dices</button> 

<span id="dice1">0</span> 
<span id="dice2">0</span> 
<span id="dice3">0</span> 
<span id="dice4">0</span> 
<span id="dice5">0</span> 
<span id="dice6">0</span> 

<br><br><br><br> 

<select id="select1"> 
<option>1 
<option>2 
<option>3 
<option>4 
<option>5 
<option>6 
</select> 

<select id="select2"> 
<option>1 
<option>2 
<option>3 
<option>4 
<option>5 
<option>6 
</select> 

<select id="select3"> 
<option>1 
<option>2 
<option>3 
<option>4 
<option>5 
<option>6 
</select> 

<select id="select4"> 
<option>1 
<option>2 
<option>3 
<option>4 
<option>5 
<option>6 
</select> 

<select id="select5"> 
<option>1 
<option>2 
<option>3 
<option>4 
<option>5 
<option>6 
</select> 

<select id="select6"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
</select> 

<button id="submit" onclick="submit()">Submit your answer</button> 

<br><br> 

<p id="correct">Correct numbers guessed: </p> 
<p id="stored"></p> 
</div> 
</body> 
</html>

的Javascript：

var numbers = [ '1', '2', '3', '4', '5', '6' ]; 

var dices = [ 'dice1', 'dice2', 'dice3', 'dice4', 'dice5', 'dice6' ]; 

var select = [ 'select1', 'select2', 'select3', 'select4', 'select5', 'select6'] 

function rolldices() { 

for (var diceindex=0; diceindex<dices.length; diceindex++) { 

var dice_value = Math.floor((Math.random()*numbers.length)); 

document.getElementById("dice" + (diceindex + 1)).innerHTML=numbers[dice_value]; 

} 

} // end of rolldices()

這是我在解決問題的嘗試：

function submit() { 

for (var selectindex=0; selectindex<select.length; selectindex++) { 

var e = document.getElementById("select" + (selectindex + 1)); 
var storedNumbers = e.options[e.selectedIndex].text; 

document.getElementById("select" + (selectindex + 1)).text; 
document.getElementById("stored").innerHTML=storedNumbers; 
} 





} // end of submit()

這個工程那種，但只有最後選擇框的文本正在顯示在「存儲」段落中。什麼是錯誤的？

來源

2014-02-15 Duplo W

而你與遇到的問題是......？什麼情況不會發生？你會得到什麼錯誤？你用控制檯調試過了嗎？ – j08691

@ j08691我沒有收到任何錯誤，但存儲的數字也沒有顯示在我的段落中。所以我不知道是什麼問題.. –

您需要存儲的每個選擇的價值，應該顯示。像

var res = ""; //declare outside of function for store all value 
function submit() { 
    //getting all select tags. 
    var allSelect = document.getElementsByTagName('select'); 
    for (var select=0; select < allSelect.length; select++) { 
     var e = document.getElementById("select" + (select + 1)); 
     var storedNumbers = e.options[e.selectedIndex].innerHTML; 
     res +=storedNumbers; //storing the selected values 
    } 
    document.getElementById("stored").innerHTML= res; 
    res = ""; 
}

DEMO

來源

2014-02-15 16:18:32

如果您單擊提交多次，您的回答會在彼此之後添加新的存儲數字。 –

@ Duplo W，請看看更新的答案。 –

這個伎倆，謝謝。 –

一個直接的問題是，你正在使用選擇爲陣列，並作爲計數變量 - 改變

function submit() { 

for (var i=0; i<select.length; i++) { 

var e = document.getElementById("select" + (i + 1)); 
var storedNumbers = e.options[e.selectedIndex].text; 

document.getElementById("select" + (i + 1)).text; 
document.getElementById("stored").innerHTML=storedNumbers; 
}

來源

2014-02-15 16:04:20 jing3142

我改變了它，現在它半功能，但只有最後一個選擇框的文本正在顯示。還在我的答案中的最後一行添加了一個編輯，我忘了在我的內容中添加innerHTML = storedNumbers; –

你會建議我如何解決這個新問題？ –

這是因爲storedNumbers可能會隨着循環的進行而改變，但當前值總是會覆蓋之前的值，因此您只剩下最後一個值 – jing3142

首先，我不建議安裝的處理程序爲HTML屬性。你應該保持邏輯和表示分離。另外，我不會爲每個字段調用getElementById（效率低下），而只需要選擇字段並根據需要篩選它們。以下是我的方法：

var selectIds = ['select1', 'select2', 'select3', 'select4', 'select5', 'select6']; 
var selectFields = document.getElementsByTagName('select'); 
var stored = document.getElementById("stored"); 
var submitButton = document.getElementById("submit"); 

submitButton.addEventListener("click", function() { 
    var values = ""; 
    for (var i = 0; i < selectFields.length; i++) { 
     var select = selectFields[i]; 
     // One of our target fields 
     if (selectIds.indexOf(select.getAttribute("id")) >= 0) { 
      values += select.value; 
     } 
    } 

    stored.innerHTML = values; 
});

請參閱我的fiddle。

更新：

在嘗試獲取對它的引用之前，需要存在一個元素。一種方法是將腳本粘貼在body標籤的最底部。

例如：

<html> 
    <body> 
    ... 
    ... 
    ... 
    <script type="text/javascript"> 
     // js here 
    </script> 
    </body> 
</html>

來源

2014-02-15 16:19:57 linstantnoodles

我收到錯誤：Uncaught TypeError：無法調用方法'addEventListener'null –

您的腳本標記在文檔的末尾嗎？或者你是否選擇'onload'事件之後的元素？如果你對兩者的回答都不是，那麼這可能是問題所在。 – linstantnoodles

它在小提琴中工作，但不在瀏覽器中。感覺像有一個）在這裏失蹤：submitButton.addEventListener（「click」，function（）{？ –

如何獲取選定的文本並顯示它們？

回答

相關問題