Entonces, lo que estoy tratando de hacer aquí para un curso de JavaScript es hacer 5 botones. Cuando hago clic en un botón, quiero que el texto del botón aparezca en el campo de texto. Por ejemplo, cuando hago clic en Rojo, quiero que aparezca el texto "rojo" en el campo y también que el fondo del campo sea rojo.
Obtuve la parte de fondo, pero no estoy seguro de cómo hacer que aparezca el texto..?
Además, me gustaría que si presiono Rojo y luego azul, el fondo rojo se "elimine". En este momento, si hago clic en rojo y luego en azul, luego hago clic en azul nuevamente, el fondo vuelve a ser rojo.
¿Algunas 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" />