So, what I'm trying to do here for a JavaScript course is to make 5 buttons. When I click a button, I want the button text appear in the text field. For instance, when I click Red, I want the text "red" to appear in the field, and also for the background in the field to be red.
I've gotten the background part, but I'm unsure how to make the text appear..?
Also, I'd like that if I press Red and then blue, the red background is "removed". Right now, if I click red and then blue, then click blue again - the background goes back to red..
Any ideas?
function toggleStyle1() {
var onclick = document.getElementById('field').classList.toggle('first-style');
}
function toggleStyle2() {
var onclick = document.getElementById('field').classList.toggle('second-style');
}
function toggleStyle3() {
var onclick = document.getElementById('field').classList.toggle('third-style');
}
function toggleStyle4() {
var onclick = document.getElementById('field').classList.toggle('fourth-style');
}
function toggleStyle5() {
var onclick = document.getElementById('field').classList.toggle('fifth-style');
}.first-style {
background-color: rgb(238, 0, 0);
font-weight: bolder;
}
.second-style {
background-color: rgb(0, 255, 76);
font-weight: bolder;
}
.third-style {
background-color: rgb(17, 0, 255);
font-weight: bolder;
}
.fourth-style {
background-color: rgb(176, 0, 199);
font-weight: bolder;
}
.fifth-style {
background-color: rgb(255, 13, 162);
font-weight: bolder;
}<button id="red" onclick="toggleStyle1('red')">red</button>
<button id="green" onclick="toggleStyle2('green')">green</button>
<button id="blue" onclick="toggleStyle3('blue')">blue</button>
<button id="purple" onclick="toggleStyle4('purple')">purple</button>
<button id="pink" onclick="toggleStyle5('pink')">pink</button>
<br />
<p>Du har valgt:</p><input type="text" id="field" />