Necesito mostrar el texto de entrada sobre la imagen mediante JavaScript. significa que cualquier texto ingresado por el usuario aparecerá en la imagen. pero todo lo entiendo [objeto HTMLInputElement]
html
<body> <div class="congrat"> <img src="img/congrat.png" alt=""> <h3 id="text">hi iam here</h3> </div> <div class="name"> <button onclick="ReplaceText()">Click Me!</button> <label for="fname">First name:</label><br> <input dir="rtl" type="text" id="name"> </div> <script src="app.js"></script> </body>código JavaScript
const Text = document.getElementById('text'); const Input = document.getElementById('name'); function ReplaceText(){ if( Input.textContent.value == 0){ console.log(1) }else{ Text.innerHTML = Input } }cuando se hace clic en el botón, se me muestra ... [objeto HTMLInputElement]
innerText por el usuario.Input es una instancia de HTMLInputElement . Tiene una propiedad .textContent , pero en forma de cadena (como lo hizo) se convierte en el marcador de posición [object X] . Utilice .value en su lugar. const text = document.getElementById('text'); const input = document.getElementById('name'); function replaceText(){ if (!input.value) { console.log(1) } else { text.innerText = input.value; } } <body> <div class="congrat"> <img src="img/congrat.png" alt=""> <h3 id="text">hi iam here</h3> </div> <div class="name"> <button onclick="replaceText()">Click Me!</button> <label for="fname">First name:</label><br> <input dir="rtl" type="text" id="name"> </div> </body>la entrada devolverá el elemento del objeto y este objeto tiene algunas propiedades como valor para obtener el valor de este objeto.
editado por @0xLogN:
evite usar innerHTML con entrada para evitar la inyección js, use innerText
const Text = document.getElementById('text'); const Input = document.getElementById('name'); function ReplaceText(){ if( Input.textContent.value == 0){ console.log(1) }else{ Text.innerText = Input.value } }