Soy bastante nuevo en la programación. Estoy jugando con pequeños proyectos para obtener algo de experiencia. Mientras codificaba, me encontré con un problema. Voy a escribir el código básico abajo. Cuando ejecuto el código, la consola da este error "No se pueden leer las propiedades de nulo (leyendo 'valor')"
function startFunction() { let string = document.getElementById("inputbutton").value; console.log(string); } <input id="text" placeholder="Type Something" maxlengh="50"> <button id="inputbutton " onclick="startFunction()">Submit</button>Has seleccionado el elemento equivocado. Creo que estás tratando de seleccionar el
<input>elemento no el
<button>elemento. si cambias
let string = document.getElementById("inputbutton").value;a
let string = document.getElementById("text").value;y debería funcionar. El motivo es que el elemento de botón no admite la propiedad de valor. Consulte la tabla de elementos HTML DOM de w3schools para obtener más información. Aquí está el código fijo con un ejemplo ejecutable:
function startFunction() { let string = document.getElementById("text").value; console.log(string); } <input id="text" placeholder="Type Something" maxlengh="50"> <button id="inputbutton "onclick="startFunction()">Submit</button>Aquí hay algunas cosas para recordar:
<script> document.getElementById('d').innerHTML = "Hello"; </script> <div id="d"> </div> <div id="d"> </div> <script> document.getElementById('d').innerHTML = "Hello"; </script>Esto se debe a que el navegador ejecuta el código línea por línea en el mismo orden en que se escribe. Para el primer ejemplo, el script se ejecuta antes que el
<div>el elemento está completamente cargado. Entonces, cuando el navegador encuentra el código, no puede encontrar el
<div>elemento por ID.
si desea obtener el valor de su entrada, puede hacer esto
<input id="text" placeholder="Type Something" maxlengh="50" /> <button id="inputbutton " onclick="startFunction()">Submit</button> <script> const textInput = document.getElementById('text') function startFunction() { let string = textInput.value console.log(string) } </script> también puedes usar addEventListener
<input id="text" placeholder="Type Something" maxlengh="50" /> <button id="inputbutton">Submit</button> <script> const textInput = document.getElementById('text') const button = document.getElementById('inputbutton') button.addEventListner('click',function(){ let string = textInput.value console.log(string) }) </script>