вот так
<!DOCTYPE HTML>
<html>
<head>
<style>
.happyend {
background-color:red;
}
</style>
</head>
<body>
<div id="win">
<div id="out_txt_1" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_2" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_3" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_4" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_5" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_6" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_7" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_8" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_9" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_10" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_11" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_12" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_13" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_14" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_15" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_16" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_17" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_18" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_19" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_20" class="inviz" contenteditable="true">текст</div>
</div>
<a href='#' id='bt'>go</a>
<script>
!function () {
var elem = document.getElementById('win');//у меня родитель с id "win"
var child = elem.getElementsByClassName('inviz');
var button = document.getElementById('bt');
var leng = child.length;
var i = 0;
button.onclick = function (e) {
if (i >= leng) return;
child[0].className = 'happyend';// тут вроде [i] нужно
i++;
return false;
}
}();
</script>
</body>
</html>
|