如何为每个按钮获取innerHTML并在文本框中显示？

时间：2016-10-26 13:48:03

标签： javascript html5 css3

只是一些HTML，但它是整个字母表。我想点击任何按钮，该字母将出现在文本框中。我是否必须为每个按钮创建getelementbyID，还是可以创建某种循环？ html - 这是html，基本上是字母表。

<div id="alpha" >
    <br/>
    <div align="center">
        <button id="q" class="letters">Q</button>
    </div>
    <div align="center">
        <button id="w" class="letters" onclick="theclick()">W</button>
    </div>
    <div align="center">
        <button id="e" class="letters">E</button>
    </div>
     <div align="center">
        <button id="r" class="letters">R</button>
    </div>
     <div align="center">
        <button id="t" class="letters">T</button>
    </div>


    **THIS IS THE JAVASCRIPT I HAVE. I only have the onclick function for button "w" for testing**

javascript - 这是javascript，它不起作用，但想做某种循环，使其成为更简单的javascript代码

<script>

    function theclick() {

        var x = document.getElementByClassName("letters").innerHTML;
        document.getElementById("textbox").value = x;
    };

</script>

3 个答案:

答案 0 :(得分：1)

我建议的一种方法是使用普通的JavaScript：

＆＃13;
＆＃13; 
// creating a named function to act as the event-handler:
function buttonOutput() {

  // to support older browsers you may need to declare
  // your variables with 'var' rather than 'let';
  // here we cache the textarea, via its id attribute:
  let textarea = document.querySelector('#result');

  // and here we update the textContent of that
  // textarea to the existing textContent with the
  // addition of the newly-clicked element (the
  // 'this' is the <button> element and is passed
  // from the EventTarget.addEventListener() method)
  // after calling String.prototype.trim() on that
  // textContent (to remove leading and trailing
  // white-space):
  textarea.textContent += this.textContent.trim();
}


// here we retrieve the <button> elements with the class
// of 'letters' from the document:
let buttons = document.querySelectorAll('button.letters'),

// here we convert the Array-like NodeList into an Array,
// using Array.from():
  buttonArray = Array.from(buttons);

// using Array.prototype.forEach() to iterate over the
// Array of <button> elements:
buttonArray.forEach(

  // 'button' is the current array-element of the Array
  // over which we're iterating; here we bind the
  // buttonOutput() function as the event-handler for
  // the 'click' event (note the deliberate lack of
  // parentheses in the function name):
  button => button.addEventListener('click', buttonOutput)
);
＆＃13; 
div > div {
  text-align: center;
}
div > button {
  width: 30%;
  text-align: center;
}
＆＃13; 
<div id="alpha">
  <div>
    <button id="q" class="letters">Q</button>
  </div>
  <div>
    <button id="w" class="letters" onclick="theclick()">W</button>
  </div>
  <div>
    <button id="e" class="letters">E</button>
  </div>
  <div>
    <button id="r" class="letters">R</button>
  </div>
  <div>
    <button id="t" class="letters">T</button>
  </div>
  <div>
    <button id="y" class="letters">Y</button>
  </div>
</div>

<textarea id="result"></textarea>
＆＃13;
＆＃13;
＆＃13;

JS Fiddle demo

以上代码段倾向于使用ES6功能，例如let，Array.from()和箭头功能; ES5替代方案 - 与旧版浏览器兼容 - 如下：

＆＃13;
＆＃13; 
// creating a named function to act as the event-handler:
function buttonOutput() {

  // 'let' changed to 'var':
  var textarea = document.querySelector('#result');

  textarea.textContent += this.textContent.trim();
}


// here we retrieve the <button> elements with the class
// of 'letters' from the document:
let buttons = document.querySelectorAll('button.letters'),

  // here we convert the Array-like NodeList into an Array,
  // using Function.prototype.call() and Array.prototype.slice():
  buttonArray = Array.prototype.slice.call(buttons);

// using Array.prototype.forEach() to iterate over the
// Array of <button> elements:
buttonArray.forEach(function(button) {
  // button is the current Array-element of the
  // Array over which we're iterating.

  // here we assign the buttonOutput() function
  // as the event-handler for the 'click' event:
  button.addEventListener('click', buttonOutput)
});
＆＃13; 
div > div {
  text-align: center;
}
div > button {
  width: 30%;
  text-align: center;
}
＆＃13; 
<div id="alpha">
  <div>
    <button id="q" class="letters">Q</button>
  </div>
  <div>
    <button id="w" class="letters" onclick="theclick()">W</button>
  </div>
  <div>
    <button id="e" class="letters">E</button>
  </div>
  <div>
    <button id="r" class="letters">R</button>
  </div>
  <div>
    <button id="t" class="letters">T</button>
  </div>
  <div>
    <button id="y" class="letters">Y</button>
  </div>
</div>

<textarea id="result"></textarea>
＆＃13;
＆＃13;
＆＃13;

JS Fiddle demo

参考文献：

答案 1 :(得分：0)

使用jQuery的解决方案是：

$(function() {
  $('.letters').on('click', function() {
    $('#textbox').text( $('#textbox').text()+$(this).text() );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textbox"></div>
<div id="alpha" >
  <div align="center">
    <button id="q" class="letters">Q</button>
  </div>
  <div align="center">
    <button id="w" class="letters">W</button>
  </div>
  <div align="center">
    <button id="e" class="letters">E</button>
  </div>
  <div align="center">
    <button id="r" class="letters">R</button>
  </div>
  <div align="center">
    <button id="t" class="letters">T</button>
  </div>
</div>

纯JS 

var letters = document.getElementsByClassName("letters");

var addLetter = function() {
  var val = document.getElementById("textbox").innerHTML,
      thisVal = this.innerHTML;
  document.getElementById("textbox").innerHTML = val + thisVal;
};

for (var i = 0; i < letters.length; i++) {
  letters[i].addEventListener('click', addLetter, false);
}
<div id="textbox"></div>
<div id="alpha" >
  <div align="center">
    <button id="q" class="letters">Q</button>
  </div>
  <div align="center">
    <button id="w" class="letters">W</button>
  </div>
  <div align="center">
    <button id="e" class="letters">E</button>
  </div>
  <div align="center">
    <button id="r" class="letters">R</button>
  </div>
  <div align="center">
    <button id="t" class="letters">T</button>
  </div>
</div>

答案 2 :(得分：0)

或者Vanilla JS解决方案就是这样：

var buttons = document.querySelectorAll("#alpha button");

for(var i =0; i < buttons.length; i++){
  var btn = buttons[i];
  btn.addEventListener("click", function() {
    document.getElementById("textbox").value += this.innerHTML;
  });
}
<div id="alpha">
  <div align="center">
    <button id="q" class="letters">Q</button>
  </div>
  <div align="center">
    <button id="w" class="letters">W</button>
  </div>
  <div align="center">
    <button id="e" class="letters">E</button>
  </div>
  <div align="center">
    <button id="r" class="letters">R</button>
  </div>
  <div align="center">
    <button id="t" class="letters">T</button>
  </div>
</div>
<input id="textbox">

相关问题
最新问题