2016-06-15 2 views
0

У меня возникли проблемы с использованием кнопок JavaScript для вызова функций при нажатии. Я пробовал несколько способов, но я думаю, что в моем коде должна быть какая-то другая проблема. Спасибо за вашу помощь. Я столкнулся с различными функциями кнопок, такими как атрибут onclick, но ничего не работает. Код запустит html-страницу, но кнопки просто ничего не делают. Функции просто не вызываются, но я точно не знаю, почему.Кнопки JavaScript не отвечают

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test Tree</title> 
</head> 
<body> 

<h1>Test Tree</h1> 

<p id="question">Ready to start the tree?</p> 

<! Below are the interactice elements> 
<button id="nextYes()">Yes</button> 
<button id="nextNo()">No</button> 


<script type="text/javascript"> 
//window.alert("hello"); 
var decision_tree = [["Ready to start the tree?"],["Node 1"],["Node 1.1", "Node  1.2"],["Node 1.1.1", "Node 1.1.2", "Node 1.2.1", "Node 1.2.2"]]; 


// this is the location in the tree, used to determine next location 
var i = 0; 
var j = 0; 

document.getElementById('y').addEventListener('click', nextYes); 
document.getElementById('n').addEventListener('click', nextNo); 

var y = document.getElementById('y'); 
var n = document.getElementById('n'); 

function nextYes() { 
    window.alert("Yes!"); 

    i++; 
    if (i==0) { 
     document.getElementById('question').innerHTML = decision_tree[i][j]; 
    } else if (i < decision_tree.length-1) { 
     j *= 2; 
     document.getElementById('question').innerHTML = decision_tree[i][j]; 
    } 
} 

function nextNo() { 

    if (i != 0 and i < decision_tree.length-1) { 
     i++; 
     j = j*2 + 1; 
     document.getElementById('question').innerHTML = decision_tree[i][j]; 
    } 
} 
</script> 

</body> 
</html> 

ответ

1

Ошибка пары. Я сократил его до соответствующих частей.

Вам нужны идентификаторы на ваших пуговицах. Ваш код JS не может найти их иначе здесь:

var y = document.getElementById('y'); 
var n = document.getElementById('n'); 

Кроме того, у вас уже есть те элементы, хранящиеся в вар у и п, поэтому нет необходимости запрашивать их снова при добавлении обработчиков событий.

var decision_tree = [["Ready to start the tree?"],["Node 1"],["Node 1.1", "Node  1.2"],["Node 1.1.1", "Node 1.1.2", "Node 1.2.1", "Node 1.2.2"]]; 
 

 

 
// this is the location in the tree, used to determine next location 
 
var i = 0; 
 
var j = 0; 
 

 
var y = document.getElementById('y'); 
 
var n = document.getElementById('n'); 
 

 
y.addEventListener('click', nextYes); 
 
n.addEventListener('click', nextNo); 
 

 

 
function nextYes() { 
 
    alert("Yes!"); 
 
} 
 

 
function nextNo() { 
 
    alert("No"); 
 
}
<h1>Test Tree</h1> 
 

 
<p id="question">Ready to start the tree?</p> 
 

 
<! Below are the interactice elements> 
 
<button id="y">Yes</button> 
 
<button id="n">No</button>

+0

Благодарность за upvote. Если это решило вашу проблему, пожалуйста, подумайте о принятии в качестве ответа. –

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