Запуск трех полей рядом друг с другом

В настоящее время я пытаюсь получить три перевода текста, которые появляются бок о бок после их выбора в раскрывающемся меню. Пока у меня первое меню работает без проблем, но второе и третье не сотрудничают. Я предполагаю, что это какая-то ошибка вложенности, но я не могу понять это. Как сделать работу javascript для всех трех полей?Запуск трех полей рядом друг с другом

То, что я получил:

<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

идентификаторы должны быть уникальными, то есть 3 элемента с скриптами Ид, и 3 с идентификатором showVal.

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

Возвращает ровно один элемент, не все элементы с идентификатором, я заменил это с

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

Для 3 с идентификатором showVal, похоже, вы имели в виду использовать различные идентификаторы для каждой кнопки: 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

Запуск трех полей рядом друг с другом

ответ

Смежные вопросы