getElementById not returning anything or problem in script?

user_13406977 0
Viewed 50

I'm making a program that returns value from input field, then changes string of field to x result depending condition. Would really appreciate help as members here have always greatly helped me in the past. Debugger is throwing this error and of course nothing is working: 

script.js:22 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at uberChecker (script.js:22)
    at HTMLButtonElement.onclick (index.html:25)

Here is my code (beginner here):

JS:

    var username = document.getElementById("myUsername").value;
    var groupIs = document.getElementById("myGroup").value;
    var warnings = document.getElementById("myWarning").value;
    var postCount = document.getElementById("myPostCount").value;





 function uberChecker() {

    if ((groupIs != ('Uber' || 'uber') && postCount > '1000') && warnings === '0') {

        document.querySelector("output-box").innerHTML = "You can become Uber !";
    } else if (postCount < '1000' && warnings === '0') {
        document.querySelector("output-box").innerHTML = (username + ' You have ' + postCount + ' posts, you do not meet the requirements');

    } else if (warnings != '0' && postCount > '1000') {
        document.querySelector("output-box").innerHTML = (username + ' You cannot upgrade with ' + warnings + ' warning')
    } else if (postCount < '1000' && warnings != '0') {
        document.querySelector("output-box").innerHTML = (username + ' you have ' + postCount + ' posts which is less than 1000 and you have ' + warnings + '% warning. You cannot upgrade');
    } else {
        document.querySelector("output-box").innerHTML = (username + ' You are already Uber');
    }

 }

HTML: 

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="blue-box"></div>

<input type="text" placeholder="Type username" id="myUsername" class="user" >
<input type="text" placeholder="Type user group" id="myGroup" class="group">
<input type="text" placeholder="Type post count" id="myPostCount" class="post">
<input type="text" placeholder="Type warning level" id="myWarning" class="warning">

<div class="UsernameText">Username</div>
<div class="groupText">Group</div>
<div class="postText">Posts</div>
<div class="warningText">Warning</div>


<button type="button" onclick="uberChecker();" class="black-box">Check if you are upgradeable</button>

<div class="output-box">Result will display here</div>

<script src="script.js"></script>

</body>

</html>
html javascript debugging
5 Answers

put a dot before the class name.

document.querySelector(".output-box").innerHTML = "You can become Uber !";
user_135627710

The problem is in this line

document.querySelector("output-box").innerHTML

querySelector function takes a selector

just change it to 

document.querySelector(".output-box").innerHTML

And it will work

user_68461200

The problem are these statements: document.querySelector("output-box")

You are looking for an element here instead of a class. You need to add a dot (.) in front of the classname so that the querySelector works properly: document.querySelector(".output-box")

user_74908710

Try following code, this will remove all error: There are two issues in your code:

1 - You are declaring variables before creating input fields.

2 - You are using querySelector in wrong way.

Put js before end of body tag.

 var username = document.getElementById("myUsername").value;
        var groupIs = document.getElementById("myGroup").value;
        var warnings = document.getElementById("myWarning").value;
        var postCount = document.getElementById("myPostCount").value;





        function uberChecker() {

            if ((groupIs != ('Uber' || 'uber') && postCount > '1000') && warnings === '0') {

                document.querySelector(".output-box").innerHTML = "You can become Uber !";
            } else if (postCount < '1000' && warnings === '0') {
                document.querySelector(".output-box").innerHTML = (username + ' You have ' + postCount + ' posts, you do not meet the requirements');

            } else if (warnings != '0' && postCount > '1000') {
                document.querySelector(".output-box").innerHTML = (username + ' You cannot upgrade with ' + warnings + ' warning')
            } else if (postCount < '1000' && warnings != '0') {
                document.querySelector(".output-box").innerHTML = (username + ' you have ' + postCount + ' posts which is less than 1000 and you have ' + warnings + '% warning. You cannot upgrade');
            } else {
                document.querySelector(".output-box").innerHTML = (username + ' You are already Uber');
            }

        }
<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div class="blue-box"></div>

    <input type="text" placeholder="Type username" id="myUsername" class="user">
    <input type="text" placeholder="Type user group" id="myGroup" class="group">
    <input type="text" placeholder="Type post count" id="myPostCount" class="post">
    <input type="text" placeholder="Type warning level" id="myWarning" class="warning">

    <div class="UsernameText">Username</div>
    <div class="groupText">Group</div>
    <div class="postText">Posts</div>
    <div class="warningText">Warning</div>


    <button type="button" onclick="uberChecker();" class="black-box">Check if you are upgradeable</button>

    <div class="output-box">Result will display here</div>
    <script src="script.js"></script>

</body>

</html>

user_61452420

Change selector condition from ("output-box") to (".output-box")

user_78374530
Related