JSFiddle - React, Tailwind, and code Playground

by Littledoggy12

HTML

<html>
  <head>
    <title>get element by id</title>
  </head>
  <body>
    <h1 id = "title">
      What I Like To Do
    </h1>
    <hr>
    <pr><em>Welcome to a fun example of how to make changing lists using HTML!</em></pr>
    <hr>
    <ul>
      <li id = "item 1">Code</li>
      <li id = "item 2">Read</li>
      <li id = "item 3">Learn</li>
    </ul>
    <button id = "changeList">
      Change list
    </button>
  </body>
</html>

JavaScript

var item1;
var item2;
var item3;

//detect button
document.getElementById("changeList").onclick = newList;

//functions
function newList() {
	item1 = prompt("First item on list:");
  item2 = prompt("Second item on list:");
  item3 = prompt("Third item on list:");
  updateList();
}

function updateList() {
	document.getElementById("item 1").innerHTML = item1;
  document.getElementById("item 2").innerHTML = item2;
  document.getElementById("item 3").innerHTML = item3;
}