Buttons 2

by Tom M

HTML

<div id="article1" class="article">
Your comment is very incorrect. There is absolutely an alternative (more than one, in fact) to mixing your JavaScript in with your HTML markup.
</div>


<div id="article2" class="article">
If you are programmatically generating the HTML anchors and injecting them into the DOM, it's marginally acceptable.
</div>


<div id="article3" class="article">
It's not syntactically unsupported. JavaScript supports it just fine (just as it does with applying click handlers to other elements as well). It's simply the wrong HTML markup for the task at hand
</div>

<div id="welcome" class="article">
Hello, this is the welcome message.
</div>


<button class ="button" id="btn1">Button 1</button>
<button class ="button" id="btn2">Button 2</button>
<button class ="button" id="btn3">Button 3</button>

<div id="fillMe">


</div>

<div id="tester">

</div>

CSS

.article {
  display: none;
}

JavaScript

document.addEventListener("load", loadFunction());

function loadFunction() { document.getElementById("fillMe").innerHTML = document.getElementById("welcome").textContent;
}





var art1 = document.getElementById("article1").textContent;
var button1 = document.getElementById("btn1");

var art2 = document.getElementById("article2").textContent;
var button2 = document.getElementById("btn2");

var art3 = document.getElementById("article3").textContent;
var button3 = document.getElementById("btn3");




if (true) {
button1.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art1;
});
}

if (true) {
button2.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art2;
});
}

if (true) {
button3.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art3;
});
}