The TypeError encountered is with the init function, as it is unable to access the property 'style' of a null

Question

The TypeError encountered is with the init function, as it is unable to access the property 'style' of a null

Regardless of how I attempt to write the code, I keep getting the same error message, and I've been working to resolve this issue since last night. However, I can't seem to understand why it's bothering me so much.

The error message insists that all these lines are incorrect.

I am following the instructions from my course, and this code is part of a lesson that focuses on video content. Unfortunately, despite making numerous modifications, the code still doesn't function as expected.

document.getElementById('dice-1').style.display = 'block';
document.getElementById('dice-2').style.display = 'block';

var scores, roundScore, activePlayer, gamePlaying;

var lastDice;


function init() {
    ...

Please assist me with this problem.

javascript html css

Answer 1

Answer №1

To resolves issues in JavaScript, you can either remove the init(); call or define the init function.

Here is a suggested solution:

function init() {
    scores = [0, 0];
    activePlayer = 0;
    roundScore = 0;
    gamePlaying = true;

    // Setting initial values
    document.getElementById('dice-1').style.display = 'none';
    document.getElementById('dice-2').style.display = 'none';

    document.getElementById('score-0').textContent = '0';
    document.getElementById('score-1').textContent = '0';
    document.getElementById('current-0').textContent = '0';
    document.getElementById('current-1').textContent = '0';
    document.getElementById('name-0').textContent = 'Player 1';
    document.getElementById('name-1').textContent = 'Player 2';
    document.querySelector('.player-0-panel').classList.remove('winner');
    document.querySelector('.player-1-panel').classList.remove('winner');
    document.querySelector('.player-0-panel').classList.remove('active');
    document.querySelector('.player-1-panel').classList.remove('active');
    document.querySelector('.player-0-panel').classList.add('active');
}

// Event listener for rolling the dice
document.querySelector('.btn-roll').addEventListener('click', function() {
    // Game logic goes here
});

// Event listener for holding the score
document.querySelector('.btn-hold').addEventListener('click', function() {
    // Game logic goes here
});

// Function to switch to the next player
function nextPlayer() {
    // Logic for switching players
}

// Event listener for starting a new game
document.querySelector('.btn-new').addEventListener('click', init);


function init(){
    // Init function definition
}

Answer 2

To resolves issues in JavaScript, you can either remove the init(); call or define the init function.

Here is a suggested solution:

function init() {
    scores = [0, 0];
    activePlayer = 0;
    roundScore = 0;
    gamePlaying = true;

    // Setting initial values
    document.getElementById('dice-1').style.display = 'none';
    document.getElementById('dice-2').style.display = 'none';

    document.getElementById('score-0').textContent = '0';
    document.getElementById('score-1').textContent = '0';
    document.getElementById('current-0').textContent = '0';
    document.getElementById('current-1').textContent = '0';
    document.getElementById('name-0').textContent = 'Player 1';
    document.getElementById('name-1').textContent = 'Player 2';
    document.querySelector('.player-0-panel').classList.remove('winner');
    document.querySelector('.player-1-panel').classList.remove('winner');
    document.querySelector('.player-0-panel').classList.remove('active');
    document.querySelector('.player-1-panel').classList.remove('active');
    document.querySelector('.player-0-panel').classList.add('active');
}

// Event listener for rolling the dice
document.querySelector('.btn-roll').addEventListener('click', function() {
    // Game logic goes here
});

// Event listener for holding the score
document.querySelector('.btn-hold').addEventListener('click', function() {
    // Game logic goes here
});

// Function to switch to the next player
function nextPlayer() {
    // Logic for switching players
}

// Event listener for starting a new game
document.querySelector('.btn-new').addEventListener('click', init);


function init(){
    // Init function definition
}

Answer 3

Answer №2

The absence of HTML elements labeled id="dice-1" or id="dice-2" seems to be the cause of the error you are encountering.

Answer 4

The absence of HTML elements labeled id="dice-1" or id="dice-2" seems to be the cause of the error you are encountering.

Answer 5

Answer №3

There is no element in the template (HTML) with the id "dice-1" or "dice-2." Therefore, the error is simply indicating that the element with that id does not exist, resulting in a null value.

Answer 6

There is no element in the template (HTML) with the id "dice-1" or "dice-2." Therefore, the error is simply indicating that the element with that id does not exist, resulting in a null value.

The TypeError encountered is with the init function, as it is unable to access the property 'style' of a null

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to receive a notification when a user chooses any option in a Material UI Autocomplete React component?

Passing form data to a different route using express

Can date ranges be utilized as separate date items on the time scale in D3.js?

What is the method for calling a JavaScript function from one file to another within a Node.js environment?

While attempting to deploy on Vercel, I encountered an error while constructing my Next.js project

Node.js utilizing modules as dependencies

Slideshow featuring cards with text overlay

Occasionally, the system may mistakenly flag a password as invalid even though it is indeed correct

Rotating SVG graphics with a growth effect

What measures can be taken to prevent the reloading of a subfolder within the same parent in the Fuel

Encountering issues with installing material-ui/core into a ReactJS project?

What is the process for combining AngularJS filters?

Error encountered with IPCRenderer in the electron render process

When utilizing array.push() with ng-repeat, it appears that separate scopes are not generated for each item

The Bootstrap navigation bar fails to include spacing between its elements

Guide on how to compile template strings during the build process with Babel, without using Webpack

Tips for modifying the text color of radio button choices in HTML and CSS

Instructions for implementing this script in HTML and JavaScript: utilize the clone() function

Search through the JSON data, identify similar values, and save them in a collection

What could be causing the page to refresh every time a post or update is made using a mock REST API with JSON