Как получить текст внутри элемента div

-3

Я пытаюсь использовать цикл для отображения горизонтальной полосы букв. Я уже делал это, жестко кодируя его списком из 26 элементов div с разными идентификаторами и текстом, но хотел бы использовать цикл в этой ситуации. Я немного смущен тем, как это сделать. Кстати, я использую javascript внутри html. В проекте используется также jQuery. Каждое письмо должно быть кликабельным. В общем, я делаю игру палача.Как получить текст внутри элемента div

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

источник

2017-01-09 Harrison Bergman

Я не уверен относительно того, что вы делаете. какой язык вы используете для цикла, который находится внутри HTML. Можем ли мы получить больше контекста? – ntgCleaner

Я отредактировал сообщение –

* «Я использую javascript внутри html кстати» * ... Откуда у вас появилась идея, что вы можете это сделать? – charlietfl

Чтобы использовать цикл, вам необходимо использовать функцию 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>

источник

2017-01-09 21:31:55

Но что, если мне нужно, чтобы каждое письмо было доступно? –

Допустим, мы ВГА 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/

источник

2017-01-09 21:34:31

Возможно, что-то подобное

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

источник

2017-01-09 21:35:56

Если вы хотите, чтобы каждая буква была нажата как кнопка, вы должны создать их как элементы кнопок, а не элементы 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>

источник

2017-01-09 21:58:55

'charCodeAt' возвращает кодовую точку UTF-16, одну или две, которые для кодового пункта Unicode. На многих шагах, предположениях и ограничениях вы могли бы объяснить, что случаи, когда это также ASCII. Но тогда вы должны снова отменить его, чтобы передать его в 'fromCharCode'. –

Сделано это форма, так как это палач игра. Использованы методы createElement() и appendChild() и цикл for. Я также добавил возможность собирать буквы, выбранные с помощью метода addEventListener(). Детали комментируются в Snippet.

SNIPPET

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

<form id='gallows' name='gallows'></form>

источник

2017-01-09 22:31:08 zer00ne

Как получить текст внутри элемента div

ответ

Смежные вопросы