CODEWITHSUNDEEP
javascript
user5329742
user5329742

Reputation:

Input's placeholder won't change from <select>

So basically what I'm trying to achieve is to make the placeholder of the inputs change when I change the select. The first input successfully changes, but that doesn't seem to be the same with the second input. Below is the code that I am using:

function onChange(fromOrTo) {
  if (fromOrTo = 'from') {
    document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
  } else if (fromOrTo = 'to') {
    document.getElementById("to").placeholder = document.getElementById("selectTo").value;
  }
}
<body>
  <div id="sect">
    <section>
      <select onchange="onChange('from')" id="selectFrom">
        <option value="Celcius">Celcius</option>
        <option value="Farenheit">Farenheit</option>
        <option value="Kelvin">Kelvin</option>
        <option value="Reamur">Reamur</option>
      </select>
      <span class="toText">to</span>
      <select onchange="onChange('to')" id="selectTo">
        <option value="Celcius">Celcius</option>
        <option value="Farenheit">Farenheit</option>
        <option value="Kelvin">Kelvin</option>
        <option value="Reamur">Reamur</option>
      </select>
    </section>
    <section>
      <input type="text" id="from">
      <span id="toText">to</span>
      <input type="text" id="to">
    </section>
  </div>
</body>

Upvotes: 0

Views: 56

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42314

You only have one equals sign in each of your if conditionals. This assigns to the variable rather than compares it. Switching to two equals signs (or three to avoid type coercison) will resolve this problem:

function onChange(fromOrTo) {
  if (fromOrTo === 'from') {
    document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
  } else if (fromOrTo === 'to') {
    document.getElementById("to").placeholder = document.getElementById("selectTo").value;
  }
}
<body>
  <div id="sect">
    <section>
      <select onchange="onChange('from')" id="selectFrom">
        <option value="Celcius">Celcius</option>
        <option value="Farenheit">Farenheit</option>
        <option value="Kelvin">Kelvin</option>
        <option value="Reamur">Reamur</option>
      </select>
      <span class="toText">to</span>
      <select onchange="onChange('to')" id="selectTo">
        <option value="Celcius">Celcius</option>
        <option value="Farenheit">Farenheit</option>
        <option value="Kelvin">Kelvin</option>
        <option value="Reamur">Reamur</option>
      </select>
    </section>
    <section>
      <input type="text" id="from">
      <span id="toText">to</span>
      <input type="text" id="to">
    </section>
  </div>
</body>

Upvotes: 0

Amit Dhaka
Amit Dhaka

Reputation: 178

You just need to compare with === instead of =

function onChange(fromOrTo) {
  if (fromOrTo === 'from') {
    document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
  } else if (fromOrTo === 'to') {
    document.getElementById("to").placeholder = document.getElementById("selectTo").value;
  }
}
<body>
  <div id="sect">
    <section>
      <select onchange="onChange('from')" id="selectFrom">
        <option value="Celcius">Celcius</option>
        <option value="Farenheit">Farenheit</option>
        <option value="Kelvin">Kelvin</option>
        <option value="Reamur">Reamur</option>
      </select>
      <span class="toText">to</span>
      <select onchange="onChange('to')" id="selectTo">
        <option value="Celcius">Celcius</option>
        <option value="Farenheit">Farenheit</option>
        <option value="Kelvin">Kelvin</option>
        <option value="Reamur">Reamur</option>
      </select>
    </section>
    <section>
      <input type="text" id="from">
      <span id="toText">to</span>
      <input type="text" id="to">
    </section>
  </div>
</body>

Upvotes: 2

Related Questions