如何获取div元素中的文本答案

【问题标题】：How to get the text inside a div element如何获取div元素中的文本
【发布时间】：2017-01-10 07:07:25
【问题描述】：

我正在尝试使用循环来显示字母的水平条。我已经通过使用 26 个 div 元素的列表对其进行硬编码来做到这一点，每个 div 元素具有不同的 id 和文本，但想在这种情况下使用循环。我对如何去做这件事有点困惑。顺便说一下，我在 html 中使用了 javascript。该项目总体上也使用 jQuery。每个字母都必须是可点击的。总而言之，我正在制作一个刽子手游戏。

<div id="letters">
  for(x = 0; x<26; x++){
    <div class="letter" id=x>(text for each letter)?????</div>
  }
</div>

【问题讨论】：

我不确定你在做什么。您对 HTML 中的循环使用什么语言。我们能获得更多背景信息吗？
我编辑了帖子
“顺便说一句，我在 html 中使用了 javascript” ...您从哪里得到可以做到这一点的想法？

标签： javascript jquery html css

【解决方案1】：

您需要使用 Javascript 函数才能在此处使用循环。 AngularJS 最好使用这样的代码。请检查以下示例：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop from 1 to 6, to make HTML headings.</p>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>

<script>
function myFunction() {
var x ="", i;
for (i=1; i<=6; i++) {
    x = x + "<h" + i + ">Heading " + i + "</h" + i + ">";
}
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

【讨论】：

但是如果我需要每个字母都可以点击呢？

【解决方案2】：

假设我们有一个带有 id 字母的 div，我们想填充它

var $holder = $('#alphabet');

var alphabet = 'abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ';
for (var i = 0; i < alphabet.length; i++) {

   var letter = alphabet[i];
   $holder.append('<div id="'+ letter +'">'+ letter +'</div>');
}

示例：https://jsfiddle.net/mo1Ljm7r/

可点击按钮： https://jsfiddle.net/mo1Ljm7r/1/

【讨论】：

【解决方案3】：

这样的事情可能会奏效

<div id="letters"></div>
<script>
var x;
var alphabet = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z];
for(x = 0; x<26; x++) {
    var temp = document.createElement("div");
    temp.innerHtml = "<a href='something'>" + alphabet[x] + "</a>";
    document.querySelector('#letters').appendChild(temp);
}
</script>

【讨论】：

【解决方案4】：

如果您希望每个字母都可以作为按钮点击，那么您应该将它们创建为按钮元素而不是 div 元素。

下面是一个 javascript 示例，它为每个以“A”开头的字母创建一个按钮元素。

每个按钮元素都添加了一个类 letter-button，它允许您使用 CSS 以相同的方式设置所有按钮的格式。

let lettersDiv = document.getElementById("letters");
let aLetterAsciiCode = "A".charCodeAt(0); //ascii character code for "A". decimal value of 65

for(i = 0; i<26; i++){ 
  let letterButton = document.createElement("button");
  letterButton.className += "letter-button"; //use css to define the formatting of your letter buttons
  let letterAsciiCode = aLetterAsciiCode + i; //A-Z are sequential in Ascii
  let letter = String.fromCharCode(letterAsciiCode); //convert back to a string
  let letterContent = document.createTextNode(letter);
  letterButton.appendChild(letterContent);
  lettersDiv.appendChild(letterButton);
}

.letter-button{
  display: inline;
  border: 1px solid black;
  margin:2px;
}

<div id="letters">
</div>

【讨论】：

charCodeAt 返回一个 UTF-16 代码点，一个或两个用于 Unicode 代码点。通过许多步骤、假设和限制，您可以解释它也是 ASCII 的情况。但是你必须再次反转它以将其传递给fromCharCode。

【解决方案5】：

使它成为一种形式，因为它是一个刽子手游戏。使用createElement() 和appendChild() 方法和for 循环。我还添加了收集使用addEventListener() 方法挑选的字母的功能。详细信息在片段中进行了评论。

片段

function alphaPanel() {

    // Reference the <form>
    var gallows = document.forms[0];

    // Create a <fieldset> 
    var set = document.createElement('fieldset');

    // Make an array of 26 strings
    var alphaArray = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    /* Start at 0;
    || For every loop...
    || ...Create a <label>...
    || ...Create an <input>...
    || ...Make <input> a [checkbox] type...
    || ...Assign <[check]> the value of i as indexed in alphaArray.
    || ...Add text to <label> with the value of i as indexed in alphArray.
    || ...Append <[check]> to <label>...
    || ...Append <label> to <fieldset>...
    || ...Continue doing this loop 25 more times
    || ...After the 26th loop is completed...
    || ...Append <fieldset> to <form>
    */
    for (let i = 0; i < 26; i++) {
      var label = document.createElement('label');
      var check = document.createElement('input');
      check.setAttribute('type', 'checkbox');
      check.value = alphaArray[i];
      label.textContent = alphaArray[i];
      label.appendChild(check);
      set.appendChild(label);
    }
    gallows.appendChild(set);
  }
  // An empty array to store the player's picks
var picked = [];

// When a change event occurs in <form> call alphaData()
gallows.addEventListener('change', alphaData, false);

/* If the node <[check]> is not...
|| ...the current node on the event chain...
|| ...then it's is the node that was clicked.
|| Store that node's value and then...
|| ...add it to the array picked.
*/
function alphaData(event) {
  if (event.target !== event.currentTarget) {
    var target = event.target;
    var pick = target.value;
    picked.push(pick);
  }
  console.log('Player has picked: ' + picked.toString());
}



// Call alphaPanel()
alphaPanel();

input[type='checkbox'] {
  width: 3ch;
  height: 3ex;
}
label {
  border: 1px solid grey;
  padding: 3px;
  line-height: 1.6;
}

&lt;form id='gallows' name='gallows'&gt;&lt;/form&gt;

【讨论】：