Tengo este formulario y me gustaría que el texto del marcador de posición se pusiera rojo cuando se haga clic en mi botón. Tengo código JS pero no parece cambiar el color cuando hicimos clic en mi botón. ¿Pensamientos?
<form> <input id="red-border-error" class="test-form-1" type="text" name="url" placeholder="yourstorehere.com"> <input class="test-button-1" type="submit" value="BUTTON"></input> </form>JavaScript
document.getElementById("url-30").addEventListener("submit", (event) => { event.preventDefault() let errorMessage = document.getElementById("red-border-error").placeholder = "Type your store URL here"; let myForm = document.getElementById("url"); let formData = new FormData(myForm); if (formData.get("urlName") === "") { document.getElementById("red-border-error").style.borderColor = "red"; document.getElementById("red-border-error").placeholder.style.color = "red"; return errorMessage; }¿¿Es esto lo que quieres??
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./styles.css" /> <title>Document</title> </head> <body> <form action="submit"> <input type="text" placeholder="placeholder" class="input" /> <button class="btn">click</button> </form> <script src="./app.js"></script> </body> </html> .input-active::placeholder { color: red; } const button = document.querySelector('.btn'); const input = document.querySelector('.input'); const form = document.querySelector('form'); form.addEventListener('submit', (e) => { e.preventDefault(); }); button.addEventListener('click', (e) => { e.preventDefault(); input.classList.add('input-active'); });