Захватив индекс массива OnClick с JavaScript

https://jsbin.com/zesegigego/edit?html,js,output Захватив индекс массива OnClick с JavaScript

Я создаю поиск слова головоломку и в точке, где я хочу, чтобы реализовать функциональные возможности, чтобы позволить пользователям отмечать слова, которые они находят. У меня есть массив s, который содержит случайно сгенерированные буквы и буквы для слов, которые нужно найти. У s слов, которые нужно найти, есть класс = "answerLetter", но у меня возникает проблема с захватом каждого индекса за раз, чтобы сказать, что мой JavaScript изменит что-то с этими конкретными индексами, на которые я нажимаю. Извиняюсь, если нет ясности, но ссылка jsbin выше, чтобы посмотреть, что у меня есть.

Я знаю, как это сделать с помощью AngularJs, где ng-repeat может быть «отслеживать по индексу», и я просто привожу этот конкретный индекс из HTML к моему контроллеру, вставив индекс $ в круглую скобку функции, такой как поэтому ng-click = "selectThisIndex ($ index)". Как мне это сделать с помощью ванильного JavaScript?

https://jsbin.com/zesegigego/edit?html,js,output

//==============SUBMITTING ANSWERS======================================= 

function showSubmit() { 
document.getElementById('submitBut').innerHTML = 
'<button onclick="submitLetters()">SUBMIT LETTERS</button>'; 
var arrayOfTds = document.getElementsByClassName('answerLetter'); 
console.log(arrayOfTds); 
} 

//==============CREATING GRID OF RANDOM LETTERS==================== 

var cols = 20; 
var rows = 10; 
var html = ""; 

for(var i = 0; i <= rows; i++) { 
html += '<tr>'; 
for(var h= 0; h <= cols; h++) { 
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'; 
    var random = parseInt(Math.random()*characters.length); 
    var letter = characters.charAt(random); //returning random letter 
    html += '<td onclick="showSubmit()">' + letter + '</td>'; 
} 
html += '</tr>'; 
} 

document.getElementById('wsBox').innerHTML += html;

источник

2015-12-14 Kandianne Pierre

Пожалуйста, вставьте соответствующий код непосредственно в вопрос и отформатировать его в качестве кода. Внешние ссылки на код имеют привычку исчезать или меняться со временем, что делает этот вопрос менее полезным, чем ресурс, который противоречит правилам здесь. – jfriend00

@ jfriend00 Спасибо за предложение. Я отредактировал свой ответ выше и вставил соответствующий код. Я не изменил jsbin, поэтому, если вы хотите увидеть другой код, он находится в ссылке –

Доступ к вашим письмам как ** window.event.target ** для доступа или изменения их класса. Другой вариант - передать ** эту ** в ** функцию showSubmit ** и получить к ней доступ в ** showSubmit **. –

Я думаю, что это то, что вы хотите :)

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>test</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <style> 
 
    .box { 
 
     width: 30px; 
 
     height: 30px; 
 
     margin: 5px; 
 
     float: right; 
 
     background: #eee; 
 
     border: solid 1px #ccc; 
 
     list-style: none; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <ul></ul> 
 

 
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <script> 
 
    for (var i = 0; i < 20; i++) { 
 
     $("ul").append("<li class=\"box\">" + i + "</li>"); 
 
    } 
 

 
    $(".box").each(function(index) { 
 
     $(this).click(function() { 
 
     console.log(index); 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2015-12-14 04:42:45 Maher

, который сработал, спасибо :) это гораздо дольше, чтобы сделать это только в JavaScript? Просто любопытно. –

yes .. только в javaScript (jQuery) – Maher

Захватив индекс массива OnClick с JavaScript

ответ

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