bastienapp · March 16, 2021 16:08
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 </head>
 <body>
  <header>
    <nav>
      <ul>
        <li>Home</li>
        <li>Articles</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h1 id="main-title">Title</h1>
      <label>
        <span>
          New title:
        </span>
        <input id="new-title" type="text" placeholder="Your new title here...">
      </label>
      <button id="change-title" type="button">Change title</button>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus minus assumenda, maiores optio enim molestiae iste expedita laborum atque quisquam nobis! Blanditiis id impedit, reprehenderit neque rerum eligendi consequuntur assumenda.</p>
    </section>
  </main>
  <footer>
    <a href="#">Mentions légales</a>
  </footer>

  <script>
    const changeButton = document.getElementById('change-title');
    const mainTitle = document.querySelector("#main-title");
    const inputTitle = document.getElementById('new-title');
    console.log('on start: ', inputTitle.value);

    changeButton.addEventListener('click', function(event) {
      console.log('on click: ', inputTitle.value);
      mainTitle.innerHTML = inputTitle.value;
      mainTitle.style.color = 'blue';
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li>Home</li>
	<li>Articles</li>
	<li>Contact</li>
	</ul>
	</nav>
	</header>
	<main>
	<section>
	<h1 id="main-title">Title</h1>
	<label>
	<span>
	New title:
	</span>
	<input id="new-title" type="text" placeholder="Your new title here...">
	</label>
	<button id="change-title" type="button">Change title</button>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus minus assumenda, maiores optio enim molestiae iste expedita laborum atque quisquam nobis! Blanditiis id impedit, reprehenderit neque rerum eligendi consequuntur assumenda.</p>
	</section>
	</main>
	<footer>
	<a href="#">Mentions légales</a>
	</footer>

	<script>
	const changeButton = document.getElementById('change-title');
	const mainTitle = document.querySelector("#main-title");
	const inputTitle = document.getElementById('new-title');
	console.log('on start: ', inputTitle.value);

	changeButton.addEventListener('click', function(event) {
	console.log('on click: ', inputTitle.value);
	mainTitle.innerHTML = inputTitle.value;
	mainTitle.style.color = 'blue';
	});
	</script>
	</body>
	</html>