Selecting and Manipulating Elements
Now that we understand what DOM and DOM manipulation are let's select and manipulate some more elements.
In the previous lecture, we selected the
message element and it's text content by doing :
Besides getting the text content of an element, we can also set the text content by doing:
document.querySelector('.message').textContent = '🎉 Correct Number!';
On saving, the text should change from
'Start guessing...' to
'🎉 Correct Number!'.
That being done, let's now do the same thing for the secret number (i.e., the question mark (?)) and the score. Both of these values are stored in an element.
Back to our HTML, we can see that our secret number is a
div element with a class
number, and our score value is a
span element with the class
score. To select those two classes, we will do what we have been doing before;
document.querySelector('.number').textContent = 23; document.querySelector('.score').textContent = 13;
Now, if you save everything, you will notice that the values have changed! Let's now do the same thing with our
The input field works a bit differently in the sense that, to get its content, we don't use
textContent as we've been doing, but instead, we use the
value attribute .i.e.
console.log(document.querySelector('.guess').value); // Result ==> Empty result since the input field has nothing document.querySelector('.guess').value = 23 // Setting the value of the imput field
If you now save it, you will see that the input field will be updated as if we had written it ourselves.
Now, let's say we want to log to the console any number we type into the input field whenever we click on the check button. Well, handling the click of a button is what we will learn in the next lecture.