运行三个并排的字段集

Question

我目前正在尝试让文本的三种翻译在下拉菜单中选择后并排显示。到目前为止，我的第一个菜单没有问题，但第二个和第三个菜单不合作。我认为这是某种嵌套错误，但我无法弄清楚。如何使 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>

Answer 1

这是 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>

Answer 2

ID 应该是唯一的，您有 3 个元素带有 id 脚本，3 个元素带有 id showVal。

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

Returns 恰好 1 个元素，不是所有元素都有 id，我将其替换为

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

对于 ID 为 showVal 的 3，您似乎打算为每个按钮使用不同的 ID：showVal, showTxt, doLoop

我假设您正在尝试以不同的方式执行所有三个点击？虽然我最初确实修复了这个问题，但我选择重构整个代码

(function() {

    // get references to select list and display text box
    var sel = document.querySelectorAll('#scripts');
    var el = document.querySelectorAll('#display');
  var buttons = document.querySelectorAll('input[type="button"');
    
  sel.forEach(function(elem, i){
     buttons[i].onclick = function(e){
       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>

运行三个并排的字段集

Running three fieldsets side-by-side

html

javascript

forms

fieldset

运行 三个并排的字段集

Running three fieldsets side-by-side

html

javascript

forms

fieldset

运行三个并排的字段集