Learn
Javascript and the DOM
Interactivity with onclick

You can add interactivity to DOM elements by assigning a function to run based on an event.

Events can include anything from a click to a user mousing over an element.

The .onclick property allows you to assign a function to run on a click event on an element:

let element = document.getElementById('interact'); element.onclick = function() { element.style.backgroundColor = 'blue' };

Instructions

1.

Modify the body of the turnButtonRed() function so that it modifies the button as follows:

  1. Assigns the .style.backgroundColor to 'red'
  2. Assigns the style.color to 'white'
  3. Modifies the .innerHTML to 'Red Button'
2.

Add interactivity to the button element by adding a function that turns its .backgroundColor to 'red' and its font color to 'white' when the button is clicked.

Folder Icon

Sign up to start coding

Already have an account?