各ボタンのinnerHTMLを取得してテキストボックスに表示する方法は？

Question

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の - これは、ジャバスクリプトで、それは働いていないが、jQueryを使って解決策は以下のようになり、それより簡単なJavaScriptコード

<script> 

    function theclick() { 

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

</script> 

Answer 1

一つのアプローチは、プレーンJavaScriptを使用して、以下のとおりである：

// 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) 
 
);

div > div { 
 
    text-align: center; 
 
} 
 
div > button { 
 
    width: 30%; 
 
    text-align: center; 
 
}

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

JS Fiddle demo。

上記のスニペットは、let,Array.from()、Arrow機能などのES6機能の使用に大きく依存しています。古いブラウザ–と互換性のES5の代替–は次のとおりです。

// 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) 
 
});

div > div { 
 
    text-align: center; 
 
} 
 
div > button { 
 
    width: 30%; 
 
    text-align: center; 
 
}

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

JS Fiddle demo。

参考文献：

• Array.from()。
• Array.forEach()。
• Arrow functions。
• document.querySelectorAll()。
• EventTarget.addEventListener()。
• let。
• Node.textContent。
• var。

Answer 2

作るためにループのいくつかの種類をしたい：

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

Answer 3

それともバニラ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">