Me gustaría hacer clic en el botón y hacer que el valor aparezca en <h3> dentro de <div> y, de acuerdo con ese valor, cambiaría background-color .
Por ejemplo, cuando escribí un valor ( Your number ) e hice clic en Click Me! , h3 dentro del div debería mostrar este valor escrito y el color de fondo también cambiaría en consecuencia.
Por ejemplo, si escribiera 33 en Your number y luego hiciera clic, el valor que aparecería sería 33 y el color sería naranja. De este modo:
Mi código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <form name="myform"> Your number: <input type="text" name="inputbox" id='textBox' value="" /> <input type="button" name="button" class="member" value="Click me!" /> <div class='box1' style='background-color:lime;width:33.33%;padding-left:15px;padding-right:15px;'> <h3> 0 </h3> <p> Valor </p> </div> </form> <script> $(function() { $('.member').click(function() { var answer = $("#textBox").val(); if (answer <= 20) { $('.box1').css('background-color','red'); } else if (answer <= 50) { $('.box1').css('background-color','orange'); } else { $('.box1').css('background-color','steelblue'); } }); }); </script> Así que quería seleccionar la etiqueta h3 y cambiarla con la declaración if else .
Si entiendo, ¿simplemente desea actualizar el contenido de la etiqueta h3 ?
Aquí hay un código (eliminé las repeticiones):
$(document).ready(function() { $('.member').click(function() { let answer = $("#textBox").val(); let color; if (answer <= 20) { color = 'red'; } else if (answer <= 50) { color = 'orange'; } else { color = 'steelblue'; } $('.box1').css('background-color',color).find('h3').html(answer); }); });