Input value doesn't display-CodePudding

The value I sent to the input does not appear on the screen. I changed the input to p and the code worked, but I need input. How can I fix this?

function numToText() {
  let newValue = document.getElementById("sizeChooser").value;

  if ((newValue = 0)) {
    newValue = "XS";
  }

  if ((newValue = 20)) {
    newValue = "S";
  }

  if ((newValue = 40)) {
    newValue = "M";
  }

  if ((newValue = 60)) {
    newValue = "L";
  }

  if ((newValue = 80)) {
    newValue = "XL";
  }

  if ((newValue = 100)) {
    newValue = "XXL";
  }

  document.getElementById("sizePointer").textContent = newValue;
}

<label for="size">Beden Seçiniz: </label>

<input name="sizeChooser" eek_range type="range" id="sizeChooser" type="range" value="40" step="20" list="tickmarks" />

<datalist id="tickmarks">
  <option value="0"></option>
  <option value="20"></option>
  <option value="40"></option>
  <option value="60"></option>
  <option value="80"></option>
  <option value="100"></option>
</datalist>

<br />

<input type="button" onclick="numToText()" value="Seç" />
<input type="text" id="sizePointer" disabled autocomplete="off" />

CodePudding user response：

First, in your numToText function, you are using the assignment operator = instead of the comparison operator == or === when checking the value of newValue. This means that the condition will always be true and the value of newValue will be overwritten.

You should use either == or === to compare the value of newValue to each of the possible values. For example:

if (newValue == 0) {newValue = "XS";}

Second, you are using the same comparison for each "if" statement, which means that newValue will always be set to the last value in the "if" statements.

You should use different comparison values for each "if" statement. For example:

if (newValue == 0) {newValue = "XS";} else if (newValue == 20{newValue = "S";} else if (newValue == 40) {newValue = "M";} // and so on

Finally, to display the value in the text input, you should use the value property of the input element rather than the textContent property.

document.getElementById("sizePointer").value = newValue;

With these changes, your code should work as expected and the selected value should be displayed in the text input.