Tell us what’s happening:
function goFight() {
update(locations[3]);
monsterHealth = monsters[fighting].health;
const paragraph = document.querySelector(‘monsterStats’);
paragraph.style.display = ‘block’;
}
Getting the following error message:
“You should use dot notation to access the style property of monsterStats”.
Kindly help me out.
Your code so far
<!-- file: index.html -->
/* file: script.js */
// User Editable Region
function goFight() {
update(locations[3]);
monsterHealth = monsters[fighting].health;
const paragraph = document.querySelector('monsterStats');
paragraph.style.display = 'block';
}
// User Editable Region
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Learn Basic JavaScript by Building a Role Playing Game - Step 118
This is just an example. Reread the instructions.
1 Like
I know but i am doing the task right? So, why this message of using dot notation? I am indeed using dot notation for styling. Please kindly write the appropriate code that would pass the step.
The instructions: “… Display the monsterStats element by updating the display property of the style property to block”
Instead of the ‘paragraph’ element in the example, you should have the one required by the instructions. Your task is to add just one code line in this challenge.
So should it be “document.querySelector(‘#monsterStats’).style.display = ‘block’;”?
This is what I have done as per instruction, still getting the same error.
I hope that the following will help you.
I noticed that you cut and pasted:
const paragraph = document.querySelector('monsterStats');
paragraph.style.display = 'block';
From the example code. Not a bad start, but the example needs some editing.
The first line:
const paragraph = document.querySelector('monsterStats');
Is just there so that ‘paragraph’, the const just created, can be used to give an example of what you need to do.
This exercise is asking you to:
“Display the monsterStats element by updating the display property of the style property to block.”
So, instead of using ‘paragraph’, you need to use ‘monsterStats’.
In this line instead of:
paragraph.style.display = 'block'
try replacing ‘paragraph’ with ‘monsterStats’. And don’t forget, the first statement:
const paragraph = document.querySelector('monsterStats');
needs to be deleted. You don’t need it.
Hi @milidharansde,
Welcome to our community!
This part, we can called a selection:
const paragraph = document.querySelector('p');
In the example right above, the paragraph variable represents our element (some people name it the selection too).
For this exercise (exercise 118), some elements have been already declared at the global scope of your implementation where they can be accessed by the whole implementation.
Setting the properties of those globally-accessible elements , like their style properties, could be eventually done at the function scopes.
The point of this exercise is identifying the globally-accessible element that needs to be modified, and then set its properties in the corresponding function.
Let us know if this helps?
(NOTE: did you know that…? there are other ways to work with global variables that prevent changes of their attributes by the functions; those approaches might be more recommended in several cases, but for now the approach we are suggesting is appropriate enough for your learning).
