Problema e investigación: tengo que cambiar automáticamente el valor del marcador de posición de una entrada de formulario HTML dentro de una función de JavaScript. Investigué un poco. El código dado no funciona para mi caso. Encontré una forma de evitarlo, pero creo que debe haber una mejor solución. Además, me pregunto por qué el código de ejemplo dado en w3school no funciona en mi caso.
Requisito: Solo HTML y Vanilla JavaScript
El código:
<body> <h1>Test JS</h1> <form id="search"> <div id="input_id"> <input type="text" id="id" name="name" required placeholder="Search..."> </div> <button type="submit">Submit</button> </form> <script> document.getElementById("id").placeholder = "This works outside of the function" document.getElementById('search').addEventListener('submit', SearchIt) async function SearchIt (event) { event.preventDefault() var newVal = "123" document.getElementById("id").placeholder = newVal //This line does not work inside the function, why? //The following line works but I am looking for a better solution (Vanilla JS only). document.getElementById("input_id").innerHTML = "<input type='text' id='id' name='name' required placeholder=" + newVal + ">" } </script> </body>Debido al atributo required , el navegador impide que se envíe el formulario cuando la entrada está vacía. Pero si escribe algo en el formulario para satisfacer la validez, el marcador de posición ya no se verá porque hay texto en la entrada.
Elimine el atributo required o establezca el valor de entrada en la cadena vacía mientras configura el nuevo marcador de posición para ver el nuevo marcador de posición.
document.getElementById("id").placeholder = "This works outside of the function" document.getElementById('search').addEventListener('submit', SearchIt) async function SearchIt(event) { event.preventDefault() document.getElementById("id").placeholder = '123'; } <h1>Test JS</h1> <form id="search"> <div id="input_id"> <input type="text" id="id" name="name" placeholder="Search..."> </div> <button type="submit">Submit</button> </form> document.getElementById("id").placeholder = "This works outside of the function" document.getElementById('search').addEventListener('submit', SearchIt) async function SearchIt(event) { event.preventDefault() document.getElementById("id").placeholder = '123'; document.getElementById("id").value = ''; } <h1>Test JS</h1> <form id="search"> <div id="input_id"> <input type="text" id="id" name="name" required placeholder="Search..."> </div> <button type="submit">Submit</button> </form>