index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="assessment">
<button id="positive" onclick="changeState()">Positive</button>
<button id="negative" onclick="changeState()">Negative</button>
<button id="neutral" onclick="changeState()">Neutral</button>
</div>
<div id="content">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
var content = document.querySelector('#content');
var positive = document.querySelector('#positive');
var negative = document.querySelector('#negative');
var neutral = document.querySelector('#neutral');
function changeState() {
positive.addEventListener('click', function () {
if(content.textContent != null){
content.removeChild(content.firstChild);
}
var choice = document.createElement('p');
var choiceText = document.createTextNode('Positive choice');
choice.appendChild(choiceText);
document.getElementById("content").appendChild(choice);
});
negative.addEventListener('click', function () {
if(content.textContent != null){
content.removeChild(content.firstChild);
}
var choice = document.createElement('p');
choice.textContent = 'Negative choice';
content.appendChild(choice);
});
neutral.addEventListener('click', function () {
if(content.textContent != null){
content.removeChild(content.firstChild);
}
var choice = document.createElement('p');
choice.textContent = 'Neutral choice';
content.appendChild(choice);
});
}