Learn Basic JavaScript by Building a Role Playing Game - Step 41

the innerText property

Correct :slight_smile:
So, now how would you update the text property of button1?

const button1= document.querySelector("#goStore");```

No, that’s recreating a variable called button1 - which should cause an error because you have already created it here, and are using const which means that button1 is immutable (cannot be changed):


you have correctly changed the onclick property of button1.

Use the same coding to change the text property of button1.

So it looks like there is some confusion on how innerText works.

Here is the basic syntax

elementName.innerText = "some text here"

Here are more examples of how to change the text for an element.

This example changes the text for a paragraph element

<p id="para">Some example</p>
const paragraphElement = document.querySelector("#para");
paragraphElement.innerText = "I just changed the text"

Whenever you work with the innerText element it should follow this basic syntax

elementName.innerText = "some text here"

Your task for this challenge is to follow that basic syntax but update the text for the button1 element to say Buy 10 health (10 gold)

hope that helps


function goStore( ){
console.log(“Going to store.”)

like this

i tried this it doesn’t work

Can you post your new code for us so we can see what is happening and best assist you?

This is my js code

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

const button1 = document.querySelector('#button1');
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");
const text = document.querySelector("#text");
const xpText = document.querySelector("#xpText");
const healthText = document.querySelector("#healthText");
const goldText = document.querySelector("#goldText");
const monsterStats = document.querySelector("#monsterStats");
const monsterName = document.querySelector("#monsterName");
const monsterHealthText = document.querySelector("#monsterHealth");

// initialize buttons
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;

function goStore() {
  button1.onclick("Buy 10 health (10 gold)");

function goCave() {
  console.log("Going to cave.");

function fightDragon() {
  console.log("Fighting dragon.");

i am on step 42 btw not 41

I think the tests may be requiring the use of arrow functions, eg

const funcName = (params if necessary) => { body of function }

I have read through the whole thread here and it looks like there are still some confusion on how to work with the innerText property.

Remove the console statement here since that is part of the directions.
Your answer should not include the console statement at all

function goStore() {
  console.log("Going to store.");


Look more closely at this part of the example

info.innerText = "Hello World";

Your answer should be one line of code that looks really similar to the code I showed.

The only differences you will make to that example I am showing you is that you need to change the Hello world text to be the text mentioned in the directions and you need to change info to the correct button variable name

Your answer should not include document.querySelector because that was already created earlier.

hope that is clearer

arrow functions aren’t taught until the music player project, so the test won’t look for that here

Oh ok, thank you for clarifying

Hi I am back.

this question is still not making sense to me.

i removed the console.log line and tried the info.innerText line but it asks for button.1

can you post your new code of what you have tried?

it will be easier to help you when I see the code :+1:

function goStore() {
  info.innerText = "Buy 10 health (10 gold)"

“info” is required “button1”.

like this?

function goStore() {
  button1.inner = "Buy 10 health (10 gold)";

don’t forget the rest of the “inner…” function.

1 Like