Change placeholder text to red onclick

Question

I have this form and would like the placeholder text to turn red when my button is clicked. I have JS code but it doesn't seem to change the color when my button us clicked. Thoughts?

<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;
            }

`document.getElementById("red-border-error").placeholder.style` makes no sense - `placeholder` is not an element, it is just an attribute, it does not have a `style` object of its own. — CBroe, Sep 10 '21 at 06:30
So the placeholder is currently gray, ideally would like the placeholder selector to turn red when the button is clicked. I know how to change placeholder text — frankieseattle, Sep 10 '21 at 06:34
Right, so what you're are saying is that you can change psuedo selector styles? — frankieseattle, Sep 10 '21 at 06:35
Not in any easy way, but you can for example just add a class on the input, and write a matching rule in your stylesheet that applies the color to the placeholder. — CBroe, Sep 10 '21 at 06:38

NWOS · Answer 1 · 2021-09-10T09:49:13.747

Is this what you want??

<!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');
});

Change placeholder text to red onclick

1 Answers1