Customizable Website

Use the buttons at the bottom of the page to change the website.

by Littledoggy12

HTML

<html>
  <head>
    <title>WEBSITE</title>
  </head>
  <body>
    <h1 id = "title"><em>Enter title here</em></h1>
    <hr>
    <pr id = "paragraph"><em>Enter paragraph here</em></pr>
    <hr>
    <h3 id = "subtitle">
      <em>Enter subtitle here</em>
    </h3>
    <ul>
      <li id = "item1"><em>Enter item 1 here</em></li>
      <li id = "item2"><em>Enter item 2 here</em></li>
      <li id = "item3"><em>Enter item 3 here</em></li>
    </ul>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button id = "buttonForTitle">
      Change title
    </button>
    <button id = "buttonForParagraph">
      Change paragraph
    </button>
    <button id = "buttonForSub.">
      Change subtitle
    </button>
    <button id = "list">
      Change list
    </button>
  </body>
</html>

JavaScript

var item1;
var item2;
var item3;
var title;
var paragraph;
var subTitle;

document.getElementById("buttonForTitle").onclick = newTitle;
document.getElementById("buttonForParagraph").onclick = newParagraph;
document.getElementById("list").onclick = newList;
document.getElementById("buttonForSub.").onclick = newSub;

function newTitle() {
	title = prompt("Enter new title:");
  document.getElementById("title").innerHTML = title;
}

function newParagraph() {
	paragraph = prompt("Enter new paragraph:");
  document.getElementById("paragraph").innerHTML = paragraph;
}

function newSub() {
	subTitle = prompt("Enter new subtitle:");
  document.getElementById("subtitle").innerHTML = subTitle;
}

function newList() {
	item1 = prompt("Enter first item:");
  item2 = prompt("Enter second item:");
  item3 = prompt("Enter third item:");
  document.getElementById("item1").innerHTML = item1;
  document.getElementById("item2").innerHTML = item2;
  document.getElementById("item3").innerHTML = item3;
}