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中的解决方案。

＆＃13;

[].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;
  })
});

＆＃13;

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

＆＃13;

Answer 2

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

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

确切地返回1个元素，而不是所有带有id的元素，我用

替换它

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

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

我假设你试图以不同的方式完成所有三次onclicks？虽然我最初修复了这个问题，但我选择重构整个代码

＆＃13;

(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

＆＃13;

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

＆＃13;

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

＆＃13;

并排运行三个字段集

2 个答案: