Загаданное слово с одинаковыми буквами

[yashka525]

Привет!

Есть загаданное слово, например "тонна". Каждая буква - в своём div'е (HiddenLetter) с одним и тем же классом = 'Letter Hidden'. На страничке кнопки в русским алфавитом, и на каждую кнопку/букву (AlphabetLetter) я вешаю EventListener. И если нажатая буква есть в этом слове, то div HiddenLetter меняем свой класс на 'Letter Opened', тем самым показываю угаданную букву. И вот проблема: если я нажимаю букву "н", то как мне сделать так, чтоб он пробежался по всему слову и открыл обе "н"? Не могу додуматься.

NewEvent(AlphabetLetter, 'click', function(){
					
	var HiddenLetter = document.getElementsByClassName('Letter Hidden')
						
	for(var k = 0;k < HiddenLetter.length;k++){
							
		if(this.innerHTML == HiddenLetter[k].innerHTML){
							
			HiddenLetter[k].className = 'Letter Opened'; //только один div затрагивает...
		}
							
	}
					
});

Заранее спасибо.

[lord2kim]

NewEvent(AlphabetLetter, 'click', function(){
					
	var HiddenLetter = document.getElementsByClassName('Letter Hidden')
						
	for(var k = 0;k < HiddenLetter.length;k++){
							
		if(this.innerHTML == HiddenLetter[k].innerHTML){
							
			HiddenLetter[k].className = 'Letter Opened'; //только один div затрагивает...
		}
							
	}
					
});

<script type="text/javascript">
function visible(val) {
	var hid = document.getElementsByClassName('Letter Hidden');
	for (i=0; i<hid.length; i++) {
		if (hid[i].innerHTML == val) {
			hid[i].className = "Letter Opened";
			//или
			//hid[i].setAttribute("class", "Letter Opened");
		}
	}
}
</script>

<input type="button" value="н" onClick="visible(this.value)">

для IE придется написать самопальный метод getElementsByClassName()

// getElementsByClassName for IE
if (typeof document.getElementsByClassName == 'undefined') {
    document.getElementsByClassName = function(classname) {
        var all = document.all,
        elements = [],
        regexpr = new RegExp('\\b'+classname+'\\b','ig');
        for(var x=0; x<all.length; x++) if (all[x].className)
        if (all[x].className.search(regexpr)!=-1) elements[elements.length] = all[x];
        return elements;
    }
}

[yashka525]

Спасибо, но не совсем работает. Если ввести "трололо", и попробовать отгадать сначала "т", затем "о", а потом "л", то "т" и "о" откроются сразу, а "л" - нет. Вот страничка.

[Джэксон]

всё нормально. просто нужно второй раз нажать на нужную букву

[yashka525]

просто нужно второй раз нажать на нужную букву

В том то весь и смысл - если угадываешь букву, должны открыться все div'ы с этой буквой.

[lord2kim]

получилось реализовать с помощью getElementsByName()...в getElementsByClassName() какой-то косяк...незнаю...
замени просто все getElementsByClassName() на getElementsByName() и пропиши к div-ам аттрибут name одинаковый...

[Deff]

yashka525,
на jQuery - подойдет ? ориентировочно строк 5 (ток выложите html код одного из слов

[yashka525]

получилось реализовать с помощью getElementsByName()

Работает! Огромное спасибо!

на jQuery - подойдет ?

Нет, спасибо. Без jQuery обойдусь.

[Gvozd]

А теперь расскажу почему так происходит
document.getElementsByClassName() возвращает вовсе не массив
document.getElementsByClassName() возвращает DonNodeList (может называтся в браузерах по-другому но суть именно такая)
Он выглядит как обычный массив, но не является обычным массивом.
В данном случае это можно назвать "живым массивом"

А именно, если вы выполните document.getElementsByClassName() И запомните его результат
Если в момент выполнения было допустим три элемента с данным классом, а через некоторое время с таким классом уже 10 объектов, то все 10 автоматически окажутся в изначально запомненном объекте
А если вы наоборот удалите один из них, то он исчезнет и из запомненного элемента


В данном конкретном примере просиходит следующее:
1) вы берете нулевой элемент, и меняете ему класс
2) в "живом массиве" HiddenLetter теперь уже не два элемента, а только один, а значит и HiddenLetter.length == 1
3) раз i == 1 и HiddenLetter.length == 1 (а значит в HiddenLetter больше нету элементов), то цикл завершается.
В цикле был перебран только один элемент

[Gvozd]

Примеры на понимание(сейчас будут добавлены в этот пост)

<div id="id1" class="someClass">id1</div>
<div id="id2" class="someClass">id2</div>
<div id="id3" class="someClass">id3</div>
<div id="id4" class="someClass">id4</div>
<div id="id5" class="someClass">id5</div>
<script type="text/javascript">
var someClass = document.getElementsByClassName('someClass');
var anotherClass = document.getElementsByClassName('anotherClass');

document.writeln('Count of someClass: ' + someClass.length + '<br>');//5
document.writeln('Count of anotherClass: ' + anotherClass.length + '<br>');//0
document.writeln('ID of first someClass: ' + someClass[0].id + '<br>');//id1
someClass[0].className='anotherClass';//change class

document.writeln('Count of someClass: ' + someClass.length + '<br>');//4
document.writeln('Count of anotherClass: ' + anotherClass.length + '<br>');//`
document.writeln('ID of first someClass: ' + someClass[0].id + '<br>');//id2
</script>

Как видим, после строки "change class" нулевой элемент плавно "перетек" из someClass в anotherClass
При этом нулевым элементом в someClass стал уже другой - id2