Hice un código HTML en replit.com .
Disculpe si la pregunta que hago es muy tonta, ya que soy nuevo en HTML y JS.
Quiero que el usuario escriba algo en el campo de entrada y haga clic en el botón "Hacer clic". Esperaba que el botón cambiara su texto a lo que el usuario escribiera. Pero en cambio, simplemente se quedó en blanco.
Aquí está mi código:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <label for="text">Type Some Text:</label><br> <input type="text" id="type" name="text"><br><br> <button type="button" style="background-color: khaki; margin-left: 20px; padding-left: 30px; border: solid 5px; border-radius: 40px; padding-right: 450px; font-size: 18px" onclick="Click()" id="click">Click Me!</button> <script> function Click() { text = document.getElementById("type").innerHTML; document.getElementById("click").innerHTML = text; } </script> </body> </html>https://codepen.io/jacobcambell/pen/OJjyoWW
Algunas cosas a considerar aquí.
Primero, para obtener el valor de una entrada HTML, debe usar .value en lugar de .innerHTML , por ejemplo:
text = document.getElementById("type").value; A continuación, (opcionalmente) puede simplemente llamar a alert() en lugar de window.alert() ya que la mayoría de los navegadores saben cómo manejarlo correctamente.
Finalmente, para cambiar su botón, debe configurar el HTML interno del botón en su variable de text , ahora mismo lo está configurando igual a "text" que es una string en JavaScript. Literalmente estás haciendo que tu botón diga "texto"
Además, recomendaría usar let para declarar sus variables aquí.
Una versión final de su función Click podría verse así:
function Click() { let text = document.getElementById("type").value; alert(text) document.getElementById("click").innerHTML = text; }Utilizar este:
function Click() { text = document.getElementById("type").value; document.getElementById("click").innerHTML = text; }Además, también puedes usar esto:
function Click() { document.getElementById("click").innerHTML = document.getElementById("type").value }