Цикл innerHTML не работает

-1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>Untitled Document</title> 
 
</head> 
 

 

 
<!-- Style Sheet --> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<!-- Style Sheet --> 
 

 

 

 
<script> 
 

 
window.onload = function(){ 
 
\t createimages(); 
 
\t } 
 

 
function createimages(){ 
 
\t var n = createScrambledArray(16); 
 
\t var img = ["chicken-icon","crab-icon","dolphin-icon","gold-fish-icon","horse-icon","octopus-icon","rabbit-icon","turtle-icon"]; 
 
\t var element = document.getElementsByClassName("box"); 
 
\t for(var i = 0; i<n.length; i++){ 
 
\t \t element.innerHTML = "<p>Test</p>"; 
 
\t } 
 
} 
 

 
function createScrambledArray(n) { 
 
    var num = [n]; 
 

 
    for (var i = 0; i < n; i++) { 
 
     var temp = Math.floor(Math.random() * n); 
 
     while (num.indexOf(temp) >= 0) { 
 
      temp = Math.floor(Math.random() * n); 
 
     } 
 
     nums.push(temp); 
 
    } 
 
    return nums; 
 
} 
 

 
function clickhandler(x){ 
 
\t var element = document.getElementsByClassName("box"); 
 
\t var getelement = document.getElementsByClassName("hide"); 
 
\t 
 
} 
 

 
</script> 
 

 
<body> 
 

 
<h1>MATCHING GAME </h1> 
 

 
<div class="container"> 
 
    <div class="box spacing" onclick="clickhandler(0)"></div> 
 
    <div class="box spacing" onclick="clickhandler(1)"></div> 
 
    <div class="box spacing" onclick="clickhandler(2)"></div> 
 
    <div class="box" onclick="clickhandler(3)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(4)"></div> 
 
    <div class="box spacing" onclick="clickhandler(5)"></div> 
 
    <div class="box spacing" onclick="clickhandler(6)"></div> 
 
    <div class="box" onclick="clickhandler(7)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(8)"></div> 
 
    <div class="box spacing" onclick="clickhandler(9)"></div> 
 
    <div class="box spacing" onclick="clickhandler(10)"></div> 
 
    <div class="box" onclick="clickhandler(11)"></div> 
 

 
    <div class="box spacing" onclick="clickhandler(12)"></div> 
 
    <div class="box spacing" onclick="clickhandler(13)"></div> 
 
    <div class="box spacing" onclick="clickhandler(14)"></div> 
 
    <div class="box" onclick="clickhandler(15)"></div> 
 
</div> 
 

 

 
</body> 
 
</html>

Довольно простой и нелепая ошибка вопрос.

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

линия element.innerHTML = "<p>Test</p>"; отказывается работать

источник

2015-10-14 LonerHero

* Uncaught ReferenceError: НУМС не определен * – Quentin

Я предлагаю вам изучить, как форматировать SO сообщения (вы можете использовать обратные тики для форматирования кода внутри предложений и «защищать» HTML-теги), а также проверять ваши сообщения. Кроме того, я предлагаю вам научиться отлаживать ваши программы, как минимум, изучать, как просматривать консоль для ошибок. Наконец, нет необходимости включать '' и другие шаблоны, так как это не относится к вопросу. –

У вас есть 2 ошибки: nums не является массивом вы определили. Это должно быть num.

Кроме того, ваш цикл должен быть таким:

for(var i = 0; i<n.length; i++){ 
     element[i].innerHTML = "<p>Test</p>"; //Since element is a collection 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>Untitled Document</title> 
 
</head> 
 

 

 
<!-- Style Sheet --> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<!-- Style Sheet --> 
 

 

 

 
<script> 
 

 
window.onload = function(){ 
 
\t createimages(); 
 
\t } 
 

 
function createimages(){ 
 
\t var n = createScrambledArray(16); 
 
\t var img = ["chicken-icon","crab-icon","dolphin-icon","gold-fish-icon","horse-icon","octopus-icon","rabbit-icon","turtle-icon"]; 
 
\t var element = document.getElementsByClassName("box"); 
 
\t for(var i = 0; i<n.length; i++){ 
 
\t \t element[i].innerHTML = "<p>Test</p>"; 
 
\t } 
 
} 
 

 
function createScrambledArray(n) { 
 
    var num = [n]; 
 

 
    for (var i = 0; i < n; i++) { 
 
     var temp = Math.floor(Math.random() * n); 
 
     while (num.indexOf(temp) >= 0) { 
 
      temp = Math.floor(Math.random() * n); 
 
     } 
 
     num.push(temp); 
 
    } 
 
    console.log(num); 
 
    return num; 
 
} 
 

 
function clickhandler(x){ 
 
\t var element = document.getElementsByClassName("box"); 
 
\t var getelement = document.getElementsByClassName("hide"); 
 
\t 
 
} 
 

 
</script> 
 

 
<body> 
 

 
<h1>MATCHING GAME </h1> 
 

 
<div class="container"> 
 
    <div class="box spacing" onclick="clickhandler(0)"></div> 
 
    <div class="box spacing" onclick="clickhandler(1)"></div> 
 
    <div class="box spacing" onclick="clickhandler(2)"></div> 
 
    <div class="box" onclick="clickhandler(3)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(4)"></div> 
 
    <div class="box spacing" onclick="clickhandler(5)"></div> 
 
    <div class="box spacing" onclick="clickhandler(6)"></div> 
 
    <div class="box" onclick="clickhandler(7)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(8)"></div> 
 
    <div class="box spacing" onclick="clickhandler(9)"></div> 
 
    <div class="box spacing" onclick="clickhandler(10)"></div> 
 
    <div class="box" onclick="clickhandler(11)"></div> 
 

 
    <div class="box spacing" onclick="clickhandler(12)"></div> 
 
    <div class="box spacing" onclick="clickhandler(13)"></div> 
 
    <div class="box spacing" onclick="clickhandler(14)"></div> 
 
    <div class="box" onclick="clickhandler(15)"></div> 
 
</div> 
 

 

 
</body> 
 
</html>

источник

2015-10-14 09:58:49

Большое спасибо за ответ !! – LonerHero

Спасибо !. Вы можете принять ответ, чтобы этот вопрос не оставался открытым. –

Вопрос остается открытым даже после принятия ответа. –

Цикл innerHTML не работает

ответ

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