How do I program a button to change the text of another element in jQuery so that if I click a button, the text of a header will be changed?

Answer 1

Hi there. You are looking for a click event on the button and a text change on the header, which can be done as such:

<div id="wrapper">

<header>This text will be changed</header>

<button>Change text</button>

</div>

header{

background: #ddd;

border-radius: 4px;

padding: 15px;

font-size: 20px;

text-align: center;

}

button {

background: #0084ff;

border: none;

border-radius: 5px;

padding: 8px 14px;

font-size: 15px;

color: #fff;

}

var $header = $("header");

var $button = $("button");

// handle click and change text

$button.on('click', function(e) {

$("header").text('I am the new text!');

});