如何在同一頁面上顯示結果？

Question

 function selectFunction(letter){ document.getElementById("select").innerHTML = "Selection is : " + letter; }

 <html> <head> <title>Event on list of elements</title> </head> <body> <div id="select"> <form> <select onchange="selectFunction(this.value)"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> </select> </form> </div> </body> </html>

我是java腳本的新手，我在這里需要做的是，當單擊其中一個選項時，結果在同一頁面上，而每次單擊另一個字母頁面時，都會顯示一個新結果。 我不知道如何做到這一點。 我嘗試做.innerHTML+=但這顯示了一堆結果，我想要一個干凈的頁面。

Answer 1

不確定問題是什么，是因為當select div 填充了字母選擇時， select元素丟失了嗎？

如果是這樣，您可以有一個專用元素來存儲選擇：

<div id="select">
    <div id="result">Selection will appear here</div>

    <form>
        <select onchange="selectFunction(this.value)">  
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
    </form>

    <script type="text/javascript">
        function selectFunction(letter){
            document.getElementById("result").innerHTML = "Selection is : " + letter;
        }
    </script>
</div>

將value添加到您的選項中也可能很方便，例如

<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>

最后，添加一個空選項，因為更改事件不適用於A因為它是第一個選項，您必須選擇另一個選項，然后再次選擇A

<option value="">Select letter:</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>

Answer 2

您正在替換您的select div 的 HTML，您需要做的是用您計算的文本創建一個子節點，然后將其附加到select div 的 HTML

這是你應該做的

 function selectFunction(letter){ var node = document.createElement("div"); var textnode = document.createTextNode("Selection is : " + letter); node.appendChild(textnode); // document.getElementById("select").appendChild(node); }

 <html> <head> <title>Event on list of elements</title> </head> <body> <div id="select"> <form> <select onchange="selectFunction(this.value)"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> </select> </form> </div> </body> </html>

如何在同一頁面上顯示結果？

問題描述

2 個解決方案

解決方案1
1 已采納 2020-02-11 16:49:36

解決方案2
1 2020-02-11 17:14:24

如何在同一頁面上顯示結果？

問題描述

2 個解決方案

解決方案1 1 已采納 2020-02-11 16:49:36

解決方案2 1 2020-02-11 17:14:24

解決方案1
1 已采納 2020-02-11 16:49:36

解決方案2
1 2020-02-11 17:14:24