Html Question posted in
Some basic documentation can be found here.

JavaScript is not communicating with my HTML file

My HTML file has a profile and help button, my help button contains a modal with a question and 3 buttons. If you select the ‘yes’ button, it should increment the Right Answers in the profile button’s table. Vice versa for the ‘no’ button to Wrong Answers.

    <!-- pretty buttons  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
    <!-- MY Script JS -->
<script src=".script.js"></script> 
 
<html lang="en">

<!-- Create Navigation Buttons -->
<div class="NavBar">
   <button type="button" class="btn btn-profile" data-toggle="modal" data-target="#profileMod" title="Profile101" data-content="Hehehe">Profile</button>
   <button type="button" class="btn btn-help" data-toggle="modal" data-target="#helpMod" title="Help101" data-content="Hohohoho">Help</button>
</div>

<!-- Profile Statistics | Modal -->
<div id="profileMod" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Profile Stats</h4>
        </div>
        
        <!-- table display -->
        <div class="modal-body">
            <table>
                <tr> 
                    <th>Right Answers:</th> 
                    <th>Wrong Answers: </th>
                </tr>
                <tr> <!-- Record of Questions-->
                    <td><input type="number" id="outputright" value=0 readonly> </td>
                    <td><input type="number" id="outputwrong" value=0 readonly> </td>
                </tr>
            </table>
        </div>
    </div>

    </div>
</div>

<!-- Help Modal -->
<div id="helpMod" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Test Question Modal</h4>
        </div>
        
        <!-- Question answers -->
        <div class="input-group">
            <p>Do you agree?</p>
                <button id="right" type="button" class="btn" data-dismiss="modal">Yes</button>
                <button id="wrong" type="button" class="btn" data-dismiss="modal">No</button>
                <button type="button" class="btn">Maybe</button>
        </div>
    </div>

    </div>
</div>

My script.js is read in the HTML file by

    <!-- MY Script JS -->
<script src=".script.js"></script>

My script.js is below:

/* Profile Statistic Counters */

let rightCount = 0;
let wrongCount = 0;

function getRight() { return rightCount; }
function getWrong() { return wrongCount; }

function right() { rightCount++; }
function wrong() { wrongCount++; }

/* whatever is 'right' & 'wrong' answer | assign ID value */
const rightInc = document.getElementById("right");
const wrongInc = document.getElementById("wrong");

/* display amount of 'right' & 'wrong' answers */
const rightAns = document.getElementById("outputright");
const wrongAns = document.getElementById("outputwrong");

/* when clicked, increment based on 'right' & 'wrong' */
rightInc.addEventListener("click", ()=> {
    right();
    rightAns.value = getRight(); // Count updated
    //localStorage.setItem("answer", "right"); // Updating data
});
wrongInc.addEventListener("click",  ()=> {
    wrong()
    wrongAns.value = getWrong(); // Count updated
    //localStorage.setItem("answer", "wrong"); // Updating data
});

It communicates properly when I input my script.js under the <script> HTML tags but when it’s in separate files, in the same folder, it refused to communicate. I also tried my script file being read a different way.
My script.js is read in the HTML file without the . and it was unsuccessful

    <!-- MY Script JS -->
<script src="script.js"></script>

All ID’s were triple checked and inputting in the scrip HTML tags proved that my code is in working order. I am just a little lost as to why it’s not properly communicating.

When check DevConsol in my web browser it claims my addEventListener syntax is incorrect specifically in the following two function in my JS

/* when correctincrement based on 'right' & 'wrong' */
rightInc.addEventListener("click", ()=> {
    right();
    rightAns.value = getRight(); // Count updated
    //localStorage.setItem("answer", "right"); // Updating data
});
wrongInc.addEventListener("click",  ()=> {
    wrong()
    wrongAns.value = getWrong(); // Count updated
    //localStorage.setItem("answer", "wrong"); // Updating data
});

Error Message in question:

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
at script.js:22:10

Tags:

2

Answers


  1. 0

    one of your variables rightInc or wrongInc is empty. print the values of these variables to the console:

    const rightInc = document.getElementById("right");
const wrongInc = document.getElementById("wrong");

console.log( rightInc );
console.log( wrongInc );

    In addition, in the given page code the order of the tags is mixed up. <html> tag cannot go after <link> tags.

    Organize the page structure according to the standard

    Login or Signup to reply.
  2. 0

    Your script and link tags must be in the <head> of your HTML. Also, you used the wrong way of pointing to your script.

    If it is in the same folder:

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

    if it is in a subdirectory like scripts, you do it like so:

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

    You also could try adding the defer attribute on your script tag:

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

    If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <!-- MY Script JS -->
        <script src="script.js"></script>
    </head>
    <body>
        <!-- Your HTML here -->
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search