Talking buttons
From XPUB & Lens-Based wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#fear1 {
position: absolute;
left:50px;
top: 10px;
width: 200px;
border: 1px solid black;
}
#fear2 {
position: absolute;
left:300px;
top: 10px;
width: 200px;
border: 1px solid black;
}
#buttons {
position: absolute;
bottom: 50px;
left: 50px;
}
</style>
<script>
function draw (message, boxid) {
// message ="Button says good"
// boxid ="fear1"
hello = document.createElement("div");
hello.innerHTML = message;
box = document.getElementById(boxid);
box.appendChild(hello);
box.style.background = "pink";
}
function button() {
draw("Button says good", "fear1");
}
function button2() {
draw("Button says bad", "fear2");
}
</script>
</head>
<body>
<div id="fear1">FEAR1</div>
<div id="fear2">
FEAR2
</div>
<div id="buttons">
<button onclick="button()">draw</button>
<button onclick="button2()">draw2</button>
</div>
</body>
</html>
