Changing Content

by mdares

HTML

<p>Refer to DOM elements by type, id, and class and change their content</p>
<p><button id="useID">Use ID</button>  
Finds the element with <code>id="first"</code> and changes the text inside it.</p>
<p><button id="useTag">Use Tag</button>  
Finds all <code>h2</code> elements and changes the text inside them.</p>
<p><button id="useClass">Use Class</button>  
Finds all elements with <code>class="foo"</code> and changes the text inside it.</p>

<h2>Heading A</h2>

<p id="firstParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum metus sit amet metus imperdiet, vitae porttitor eros pulvinar. Vestibulum efficitur augue eu arcu suscipit porttitor. Morbi tempor volutpat libero, sed ultrices ipsum molestie
  id. </p>

<p>Vivamus quis aliquam risus. Vestibulum sit amet dapibus erat. Phasellus fringilla tincidunt lorem, at convallis est consequat id. Proin id neque convallis, rutrum dolor a, ornare leo. Phasellus sit amet tellus eu metus semper efficitur at vel ligula.</p>

<h2 class="foo">Heading B</h2>

<p class="foo">Curabitur ultricies mollis purus, quis suscipit nisl feugiat id. Nulla odio velit, euismod ut ex ac, rutrum venenatis leo. Mauris vel sollicitudin odio. Vestibulum eros tortor, sodales sit amet sem et, pellentesque iaculis arcu.</p>

<!-- inspiration / content from https://jsfiddle.net/macloo/n0q9d8Lc/ -->

JavaScript

// demonstrate DOM action

// message will change each time a button is clicked
// array used by changeMessage() function below
var messages = ["Go Vikings!",
  "My name is Inigo Montoya ...",
  "It's cold outside",
  "All your foo are belong to us!",
  "Oh the year was 1778 ..."
];

var count = 0;
var message = messages[count];

// click a button and a function will run 
document.getElementById("useID").onclick = useID;
document.getElementById("useTag").onclick = useTag;
document.getElementById("useClass").onclick = useClass;

// text in the paragraph with id="firstParagraph" will also change 
// if you click directly on it 
document.getElementById("firstParagraph").onclick = useID;


// 3 functions, one for each button -- 

// one p has the ID "firstParagraph" - so only that p will change
function useID() {
  document.getElementById("firstParagraph").innerHTML = message;
  changeMessage();
}

// there are two h2 elements - they change when you click this
// only h2 text will change
function useTag() {
  var heds = document.getElementsByTagName("h2");
  for (var i = 0; i < heds.length; i++) {
    heds[i].innerHTML = message;
  }
  changeMessage();
}

// two elements have the class "foo" - they change when 
// you click this
function useClass() {
  var allFoos = document.getElementsByClassName("foo");
  for (var i = 0; i < allFoos.length; i++) {
    allFoos[i].innerHTML = message;
  }
  changeMessage();
}

// change the message every time a button is clicked
// using the array of messages at the top of this script 
function changeMessage() {
  if (message >= messages[messages.length - 1]) {
    count = 0;
  } else {
    count++;
  }
  message = messages[count];
}