Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

バニラJavaScriptを使用してボタンをクリックすると、div要素に配列アイテムが表示されます

配列の要素をdiv内に埋め込むには、配列を反復処理して、要素をdivに追加し続ける必要があります

これはこのように行うことができます-

例

const myArray = ["stone","paper","scissors"];
const embedElements = () => {
   myArray.forEach(element => {
      document.getElementById('result').innerHTML +=
      `<div>${element}</div><br />`;
      // here result is the id of the div present in the DOM
   });
};

このコードは、arrayの要素を表示するdivのIDが「result」であると想定しています。

このための完全なコードは-

になります

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
   <div id="result"></div>
   <button onclick="embedElements()">Show Data</button>
<script>
{
   const myArray = ["stone","paper","scissors"];
   function embedElements(){
      myArray.forEach(el => {
         document.getElementById('result').innerHTML +=`<div>${el}</div><br />`;
         // here result is the id of the div present in the dom
      });
   };
}
</script>
</body>
</html>

出力

バニラJavaScriptを使用してボタンをクリックすると、div要素に配列アイテムが表示されます

「データを表示」ボタンをクリックすると、以下が表示されます-

バニラJavaScriptを使用してボタンをクリックすると、div要素に配列アイテムが表示されます


  1. ボタンクリック時にJavaScriptでdivを非表示にする方法は？

    次は私たちのdivだとしましょう- <div id="showOrHide"> Welcome in JavaScript </div> 以下は私たちのボタンです。クリックすると、上記のdivが非表示になります- <button onclick="showOrHideDiv()">Click The Button</button> JavaScriptでstyle.displayの概念を使用して、divを非表示にします。以下はコードです- 例 <!DOCTYPE html> <ht

  2. ボタンクリック時にJavaScript配列アイテムを一度に1つずつ逆に表示するにはどうすればよいですか？

    以下が私たちの配列だとしましょう- var listOfNames = [    'John',    'David',    'Bob' ]; 以下は私たちのボタンです- <button id="reverse" onclick="reverseTheArray()">Click The Button To get the Reverse Value</button> ここで、逆の配列アイテムの場合、最初に配列の長さに