Button registering being clicked

Question

I'm currently trying to thirtyMinDelayButton to register that it has been clicked. I have looked around trying to find a way that would allow for the eventlistener to determine if the button has been clicked. So far I've used .queryselector to get the class name as well as .getElementByID and neither of those seem to work. How is it that I should set this up so it would register that the button was clicked and then take me to changes.html?

var thirtyMinDelayButton = document.getElementById(".30-minute-delayed-button");
var hourDelayButton = document.getElementById(".hour-delayed-button");
var cancelledButton = document.getElementById(".cancelled-button");

/*update changes*/
function thirty_min_delay(){
    document.querySelector("thirtyMinuteDelayButton") = "changes.html";


}
function hour_delay(){
    document.querySelector("hourDelayButton") = "changes.html";
}
function cancelled(){
    document.querySelector("cancelledButton") = "changes.html";
}

/*
 * event listeners
 */
thirtyMinDelayButton.addEventListener("click", thirty_min_delay, false);
hourDelayButton.addEventListener("click", hour_delay, false);
cancelledButton.addEventListener("click", cancelled, false);

Then the HTML is:

<article id="contentstart">
                <h2>Football</h2>
                <p>Click a button below to update the schedule.</p> 
                <div class="changes">
                    <p class="30-minute-delayed-button">30 Minute Delay</p>
                    <p class="hour-delayed-button">hour Delay</p>
                    <p class="cancelled-button">Cancelled</p>
                </div>
            </article>

Answer 1

Change classes to ID (which should be unique), or else if you want to select via class either use document.querySelector or document.getElementsByClassName , both of which will return a collection of nodes.

        <article id="contentstart">
            <h2>Football</h2>
            <p>Click a button below to update the schedule.</p> 
            <div class="changes">
                <p id="30-minute-delayed-button">30 Minute Delay</p>
                <p id="hour-delayed-button">hour Delay</p>
                <p id="cancelled-button">Cancelled</p>
            </div>
        </article>

While using getElementById , always provide the plain string id.

var thirtyMinDelayButton = document.getElementById("30-minute-delayed-button");
var hourDelayButton = document.getElementById("hour-delayed-button");
var cancelledButton = document.getElementById("cancelled-button");

/*update changes*/
function thirty_min_delay(){
    document.querySelector("thirtyMinuteDelayButton") = "changes.html";
}
function hour_delay(){
    document.querySelector("hourDelayButton") = "changes.html";
}
function cancelled(){
    document.querySelector("cancelledButton") = "changes.html";
}

/*
 * event listeners
 */
thirtyMinDelayButton.addEventListener("click", thirty_min_delay, false);
hourDelayButton.addEventListener("click", hour_delay, false);
cancelledButton.addEventListener("click", cancelled, false);