Review Algorithmic Thinking by Building a Dice Game - Step 1

JavaScript
1

Tell us what’s happening:

I thought I had it right, but it’s actually wrong. The feedback gives me a hint on assigning #score-options to scoreInputs, which I’ve already done. I’d like to know where the error is.

Your code so far

<!-- file: index.html -->


/* file: script.js */
// User Editable Region

const listOfAllDice = document.querySelectorAll(".die");
const scoreInputs = document.querySelectorAll("#score-options");
const scoreSpans = document.querySelectorAll("#score-options");
const roundElement = document.querySelectorAll("#current-round");
const rollsElement = document.querySelectorAll("#current-round-rolls");
const totalScore = document.querySelectorAll("#total-score");
const scoreHistory = document.querySelectorAll("#score-history");
const rollDiceBtn = document.querySelectorAll("#roll-dice-btn");
const keepScoreBtn = document.querySelectorAll("#keep-score-btn");
const rulesBtn = document.querySelectorAll("#rules-btn");
const rulesContainer = document.querySelectorAll(".rules-container");
const isModalShowing = false;
const diceValuesArr = [];
let rolls = 0;
let score = 0;
let round = 1;

// User Editable Region

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 1

2

Hi there!

Above you have get one id with two different variables.

3

‘Get your score inputs (the input elements in your #score-options ) and score spans, and assign them to scoreInputs and scoreSpans .’

This confused me a bit.

4

Add input for scoreInputs and add span for scoreSpans variable within query selector, after "#score-options".
Like we get a child element with id selector.

#elementId childEl {

}
5

I already did that, but now the feedback I’m getting is to assign #current-round to roundElement, which I believe I’ve already done. I still have it wrong, and I don’t understand where the error is. Here’s my code:

const listOfAllDice = document.querySelectorAll(".die");
const scoreInputs = document.querySelectorAll("#score-options input");
const scoreSpans = document.querySelectorAll("#score-options span");
const roundElement = document.querySelectorAll("#current-round");
const rollsElement = document.querySelectorAll("#current-round-rolls");
const totalScore = document.querySelectorAll("#total-score");
const scoreHistory = document.querySelectorAll("#score-history");
const rollDiceBtn = document.querySelectorAll("#roll-dice-btn");
const keepScoreBtn = document.querySelectorAll("#keep-score-btn");
const rulesBtn = document.querySelectorAll("#rules-btn");
const rulesContainer = document.querySelectorAll(".rules-container");
const isModalShowing = false;
const diceValuesArr = [];
let rolls = 0;
let score = 0;
let round = 1;
6

Don’t use querySelectorAll for getting a single element. You can use getElementById to get one element by its id.

7

I got it, but did I do anything differently with the .rules-container?

8

Look at the index.html file. How many elements of that class are you trying to get? If only one then querySelector is the function you want to use.