Help with JS game

Question

Hi :-)

I'm trying to make a JS game (very simple) to improve my JS skills but now I'm stucked cause I get an error (inputs.addEventListener is not a function) and I can't seem to fix it and I've been google'ing all day searching for an answer :-/

I'm trying to add a class (to select the users choice) to the input:radio that's being clicked on but can't make the addEventListener work.

I hope someone can help me :-)

<!DOCTYPE html>

<html>

<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/main.js"></script>
</head>

<body>
    <div id="rps"></div>
</body>

</html

window.onload = function () {

    //Creating all the elements on the page
    var addElement = function(htmlTag, htmlText, htmlId, htmlType, htmlName, htmlFor) {
        var myDiv = document.getElementById("rps");
        var html = document.createElement(htmlTag);
        var text = document.createTextNode(htmlText);

        var id = html.setAttribute("id", htmlId);
            if (htmlId === undefined || htmlId === false) {
                html.removeAttribute("id");
            }
        var type = html.setAttribute("type", htmlType);
            if (htmlType === undefined || htmlType === false) {
                html.removeAttribute("type");
            }
        var name = html.setAttribute("name", htmlName);
            if (htmlName === undefined || htmlName === false) {
                html.removeAttribute("name");
            }
        var labelFor = html.setAttribute("for", htmlFor);
            if (htmlFor === undefined || htmlFor === false) {
                html.removeAttribute("for");
            }

        html.appendChild(text);
        myDiv.appendChild(html);
    }

    addElement("h1", "Rock, Paper and Sciccors", "heading");
    addElement("p", "In this game you will choose 'Rock', 'Paper' or 'Sciccors' and try to see if you can beat the computer.");
    addElement("input", "Rock", "rock", "radio", "user_action");
    addElement("label", "Rock", false, false, false, "rock");
    addElement("input", "Paper", "paper", "radio", "user_action");
    addElement("label", "Paper", false, false, false, "paper");
    addElement("input", "Sciccors", "sciccors", "radio", "user_action");
    addElement("label", "Sciccors", false, false, false, "sciccors");
    addElement("button", "Rock, Paper, Sciccors", false, "button");

    var rock = document.getElementById("rock");
        rock.checked = true;
    var paper = document.getElementById("paper");
        paper.checked = false;
    var sciccors = document.getElementById("sciccors");
        sciccors.checked = false;

    function addChecked() {
        if (rock.checked === true) {
            console.log("rock");
        }

    }

    var inputTarget = document.getElementsByTagName("input");
    inputTarget.addEventListener("click", addChecked);


};

Answer 1 · 2016-08-21T15:19:51Z

August 21, 2016 3:19pm

note that

document.getElementsByTagName("input")

returns a html collection of elements: https://developer.mozilla.org/de/docs/Web/API/document/getElementsByTagName

something like this should work

var inputTarget = document.getElementsByTagName("input")[0];
inputTarget.addEventListener("click", addChecked);

Moderator Edited: Moved from Comment section to Answer

Answer 2 · 2016-08-21T15:34:21Z

August 21, 2016 3:34pm

Cool, now I don't get that error anymore - it still need some adjustment but now I can continue :-) Thank you very much :-D

Welcome to the Treehouse Community

Looking to learn something new?

Henrik Christensen

Henrik Christensen

Help with JS game

2 Answers

Max Karacsony

Max Karacsony

Henrik Christensen

Henrik Christensen