Outputting text content depending on what is selected

[buoyant rampart]

https://scrimba.com/scrim/cbGLdwHa

My scrim is linked above.

I have a div that appears after you click the submit button. Inside is a span that that needs to output the relevant text depending on which "rating" was selected on the first page. I have tried quite a few things but it seems to break the whole component (the ratings buttons 1, 2, 3, 4, 5 no longer can be selected once i try to target the span with the id "rating-selected" and output depending on which number has the class of .select)

I have googled and i think im doing it somewhat right, i must be putting the document.getElementById('rating-selected').textContent = text
in the wrong place in the JS file.

Text means
let text = document.querySelector(".select").innerHtml;

[gritty skiff]

The current code is very close to working. The line that's setting the span's textContent can work in its current place, if you can determine what text should actually be (it's currently an undefined variable).

Since you have a click event listener on each of the rating buttons, when a click happens, you know which element is running the handler code. And since you have the element, you have access to all of its properties and attributes. So what you could do is access the correct property and replace the undefined text with that property. Now, what property of the clicked element would give you what you want? SPOILER: ||in the click handler, see what is displayed when you console.log rating.textContent.||

Does this make sense?