連續3個字段集並排側

我正在試圖讓一個文本的三個平移在下拉菜單中選擇它們後出現並排側。到目前爲止，我已經有了第一個菜單沒有問題，但第二個和第三個菜單沒有合作。我認爲這是一種嵌套錯誤，但我無法弄清楚。如何讓所有三個字段集都可以使用JavaScript？連續3個字段集並排側

我已經有了：

<html> 
<head> 
<style> 
body 
{ 
    background-image:url('gradient1.jpg'); 
    background-repeat:repeat-x; 
} 
.ex 
{ 
    margin:auto; 
    width:90%; 
    padding:10px; 
    border:outset; 
} 
select 
{ 
    display:inline; 
    cursor:pointer; 
} 
form{ 
    display:inline-block; 
    width: 550px; 
} 

</style> 
</head> 
<body> 
    <div class="ex"> 
     <form action="#" method="post" id="demoForm"> 

      <fieldset> 
       <legend>Select Translation</legend> 
       <p> 
       <select id="scripts" name="scripts"> 
        <option value="scroll">Orignal Greek</option> 
        <option value="tooltip">Original Latin</option> 
        <option value="con_scroll">English Translation</option> 
       </select> 
       <br> 
       <p> 
       <input type="button" id="showVal" value="Select" /> 
       </p>  
       <output type="text" size="30" name="display" id="display" /> 
      </p> 

      </fieldset> 

     </form> 
     <form action="#" method="post" id="demoForm2"> 

      <fieldset> 
       <legend>Select Translation</legend> 
       <p> 
       <select id="scripts" name="scripts"> 
        <option value="scroll">Orignal Greek</option> 
        <option value="tooltip">Original Latin</option> 
        <option value="con_scroll">English Translation</option> 
       </select> 
       <br> 
      <p> 
      <input type="button" id="showVal" value="Select" /> 
      </p>  
      <output type="text" size="30" name="display" id="display" /> 
      </p> 

    </fieldset> 

    </form> 
    <form action="#" method="post" id="demoForm3"> 

     <fieldset> 
      <legend>Select Translation</legend> 
      <p> 
       <select id="scripts" name="scripts"> 
        <option value="scroll">Orignal Greek</option> 
        <option value="tooltip">Original Latin</option> 
        <option value="con_scroll">English Translation</option> 
       </select> 
       <br> 
       <p> 
       <input type="button" id="showVal" value="Select" /> 
       </p>  
       <output type="text" size="30" name="display" id="display" /> 
       </p> 

     </fieldset> 

    </form> 
</div> 
</body> 
<script> 
(function() { 

    // get references to select list and display text box 
    var sel = document.getElementById('scripts'); 
    var el = document.getElementById('display'); 



    function getSelectedOption(sel) { 
     var opt; 
     for (var i = 0, len = sel.options.length; i < len; i++) { 
      opt = sel.options[i]; 
      if (opt.selected === true) { 
       break; 
      } 
     } 
     return opt; 
    } 

    // assign onclick handlers to the buttons 
    document.getElementById('showVal').onclick = function() { 
     el.value = sel.value;  
    } 

    document.getElementById('showTxt').onclick = function() { 
     // access text property of selected option 
     el.value = sel.options[sel.selectedIndex].text; 
    } 

    document.getElementById('doLoop').onclick = function() { 
     var opt = getSelectedOption(sel); 
     el.value = opt.value; 
    } 

}()); 
// immediate function to preserve global namespace 
</script>

來源

2016-10-15 D.C

這裏是vanillaJS解決方案。

[].forEach.call(document.querySelectorAll(".demoForm"), function(element) { 
 
    element.querySelector("#showVal").addEventListener("click", function(event) { 
 
    var dropdown = element.querySelector("#scripts"); 
 
    var value = dropdown.options[dropdown.selectedIndex].text; 
 
    element.querySelector("#display").innerHTML = value; 
 
    }) 
 
});

<div class="ex"> 
 
    <form action="#" method="post" class="demoForm"> 
 

 
    <fieldset> 
 
     <legend>Select Translation</legend> 
 
     <p> 
 
     <select id="scripts" name="scripts"> 
 
      <option value="scroll">Orignal Greek</option> 
 
      <option value="tooltip">Original Latin</option> 
 
      <option value="con_scroll">English Translation</option> 
 
     </select> 
 
     <br> 
 
     <div class="inline"> 
 
      <p> 
 
      <input type="button" id="showVal" value="Select" /> 
 
      </p> 
 
      <span id="display"></span> 
 
     </div> 
 

 
    </fieldset> 
 

 
    </form> 
 
    <form action="#" method="post" class="demoForm"> 
 

 
    <fieldset> 
 
     <legend>Select Translation</legend> 
 
     <p> 
 
     <select id="scripts" name="scripts"> 
 
      <option value="scroll">Orignal Greek</option> 
 
      <option value="tooltip">Original Latin</option> 
 
      <option value="con_scroll">English Translation</option> 
 
     </select> 
 
     <div class="inline"> 
 
      <p> 
 
      <input type="button" id="showVal" value="Select" /> 
 
      </p> 
 
      <span id="display"></span> 
 

 
     </div> 
 
    </fieldset> 
 

 
    </form> 
 
    <form action="#" method="post" class="demoForm"> 
 

 
    <fieldset> 
 
     <legend>Select Translation</legend> 
 
     <p> 
 
     <select id="scripts" name="scripts"> 
 
      <option value="scroll">Orignal Greek</option> 
 
      <option value="tooltip">Original Latin</option> 
 
      <option value="con_scroll">English Translation</option> 
 
     </select> 
 
     <br> 
 
     <div class="inline"> 
 
      <p> 
 
      <input type="button" id="showVal" value="Select" /> 
 
      </p> 
 
      <span id="display"></span> 
 

 
     </div> 
 
    </fieldset> 
 

 
    </form> 
 
</div>

來源

2016-10-15 00:27:43 Sreekanth

第二兩個按鈕似乎沒有工作 – Gabs00

編輯的代碼。它現在有效。 – Sreekanth

ID應該是唯一的，你有3個元素用id腳本，和3號showVal。

var sel = document.getElementById('scripts') 
var el = document.getElementById('display');

正好返回1元，不是所有用id元素，我

var sel = document.querySelectorAll('#scripts'); 
var el = document.querySelectorAll('#display');

替代本作的3號showVal它看起來像你的意思是使用不同的ID爲每個按鈕：showVal, showTxt, doLoop

我假設你正在嘗試做所有這三個onclicks以不同的方式？雖然我做了修復，最初，我選擇重構整個代碼

(function() { 
 

 
    // get references to select list and display text box 
 
    var sel = document.querySelectorAll('#scripts'); 
 
    var el = document.querySelectorAll('#display'); 
 
\t \t var buttons = document.querySelectorAll('input[type="button"'); 
 
    
 
\t \t sel.forEach(function(elem, i){ 
 
    \t buttons[i].onclick = function(e){ 
 
     \t el[i].value = elem.value; 
 
     }; 
 
    }) 
 
}()); 
 
// immediate function to preserve global namespace

.ex 
 
{ 
 
    margin:auto; 
 
    width:90%; 
 
    padding:10px; 
 
    border:outset; 
 
} 
 
select 
 
{ 
 
    display:inline; 
 
    cursor:pointer; 
 
} 
 
form{ 
 
    display:inline-block; 
 
    width: 550px; 
 
}

<div class="ex"> 
 
     <form action="#" method="post" id="demoForm"> 
 

 
      <fieldset> 
 
       <legend>Select Translation</legend> 
 
       <p> 
 
        <select id="scripts" name="scripts"> 
 
         <option value="scroll">Orignal Greek</option> 
 
         <option value="tooltip">Original Latin</option> 
 
         <option value="con_scroll">English Translation</option> 
 
        </select> 
 
        <br> 
 
        <p> 
 
        <input type="button" id="showVal" value="Select" /> 
 
        </p>  
 
        <input type="text" size="30" name="display" id="display" /> 
 
       </p> 
 

 
      </fieldset> 
 

 
     </form> 
 
     <form action="#" method="post" id="demoForm2"> 
 

 
      <fieldset> 
 
       <legend>Select Translation</legend> 
 
       <p> 
 
       <select id="scripts" name="scripts"> 
 
        <option value="scroll">Orignal Greek</option> 
 
        <option value="tooltip">Original Latin</option> 
 
        <option value="con_scroll">English Translation</option> 
 
       </select> 
 
       <br> 
 
      <p> 
 
      <input type="button" id="showTxt" value="Select" /> 
 
      </p>  
 
      <input type="text" size="30" name="display" id="display" /> 
 
      </p> 
 

 
    </fieldset> 
 

 
    </form> 
 
    <form action="#" method="post" id="demoForm3"> 
 

 
     <fieldset> 
 
      <legend>Select Translation</legend> 
 
      <p> 
 
       <select id="scripts" name="scripts"> 
 
        <option value="scroll">Orignal Greek</option> 
 
        <option value="tooltip">Original Latin</option> 
 
        <option value="con_scroll">English Translation</option> 
 
       </select> 
 
       <br> 
 
       <p> 
 
       <input type="button" id="doLoop" value="Select" /> 
 
       </p>  
 
       <input type="text" size="30" name="display" id="display" /> 
 
       </p> 
 

 
     </fieldset> 
 

 
    </form> 
 
</div>

來源

2016-10-15 01:23:09 Gabs00

嘿，你真了不起。非常感謝！ –

@ D.C不要忘記接受 – Gabs00

連續3個字段集並排側

回答

相關問題