JavaScript Buttons Not Responding

Question

I am having trouble getting JavaScript buttons to call functions on being clicked. I've tried multiple ways, but I think there must be some other issue in my code. Thanks for your help. I've messed around with different button features like the 'onclick' attribute, but nothing seems to work. The code will launch an html page, but the buttons just don't do anything. The functions just never get called, but I'm not sure exactly why.

<!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>

Answer 1

A couple errors there. I've shortened it to just the relevant parts.

You needed ids on your buttons. Your js code can't locate them otherwise here:

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

Also, you already have those elements stored in var y and n, so no need to query them again when adding the event listeners.

 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>

JavaScript Buttons Not Responding

Question

1 answers

solution1
1 2016-06-15 14:33:20

JavaScript Buttons Not Responding

Question

1 answers

solution1 1 2016-06-15 14:33:20

solution1
1 2016-06-15 14:33:20