Javascript dom exercises

Javascript DOM exercises

These Javascript exercises cover everything you need to know about manipulating web pages using the Document Object Model (DOM).

Start Challenge

Execute function on button click

The Javascript function handleText fills the input field with the words Hello World. But, there is no code to execute...

Events and user interactions | easy

Challenges

DOM selector methods

DOM manipulation

Events and user interactions

DOM fundamentals

Recursive functions

Stop and restart the moving button

Example

Try it out for yourself. In the following example, we want to change the text of the button in the example UI. The existing JavaScript code already selects the button in the DOM. It also registers an event listener with a callback function that is executed once the button is clicked.

But, a tiny detail is missing for the code to actually change the text of the button. Assign the variable text to the innerText property of the button element!

Confirm that your code is working by clicking the button in the example UI.

View

<button type="button"  id="button">Click Me</button>
				HTML

const button = document.getElementById('button');


button.addEventListener('click', () => {
  const text = 'Thank You! ❤️';
  // assign the variable 'text'

			
				
				button.innerText = 
			});

			

			
			Javascript

Support us