Return back value at input with javascript

Question

I have a toggle button with by default value="1" = on offer.Now, with my jQuery, I can change this value to 0, for on request.But, after that, if I want to change it back to value 1, it s blocked with value="0".How can I do to make this revert to my value by default?

function change() {
  var elem = document.getElementById("home-header_on_offer");
  if (elem.value == "1") 
    elem.value = "0";
  else if (elem.value = "0") 
    elem.value = "1";
}

<label class="label" style="right: -20px;position: relative">On offer</label>
<label class="switchCr">
  <input onclick="change()" type="checkbox" name="custom7" value="1" id="home-header_on_offer"
checked="checked">
  <span class="sliderCr round select" id="my-career-search-header" style="border-radius: 0px;top: -52px;width: 255px;height: 33px;border-width: 1px;border-color:  #bbb;position: relative;box-shadow: none;"onclick="myFunction2()"></span>
</label>

`else if (elem.value = "0")` will always be true. You need to use `==` or `===` to test equality, not `=`. Also note that changing a control's value at runtime is a bad idea. The whole point of a checkbox is that it sends a value when it's checked, otherwise it sends no value. Therefore you simply need your server-side logic to work with the sent value or null. — Rory McCrossan, Jul 18 '19 at 10:21

score 3 · Accepted Answer · answered Jul 18 '19 at 10:24

In your else if part it would be == instead of =.

== is for comparison two side
=== is for caparison with strict type
= is for assigning.

function change()  {
    var elem = document.getElementById("home-header_on_offer");
    if (elem.value == '1') elem.value = '0';
    else if (elem.value == '0') elem.value = '1';

    console.log(elem.value)
}

<label class="label">On offer</label>
<label class="switchCr ">
    <input onclick="change()" type="checkbox" name="custom7" value="1" id="home-header_on_offer" checked="checked">
    <span class="sliderCr round select" id="my-career-search-header"></span>
</label>

score 1 · Answer 2 · answered Jul 18 '19 at 10:23

1

You have a type in your else condition. Also if you want to compare to 0 or '0' better use strict === comparison:

  if (elem.value === "1") {
    elem.value = "0";
   } else if (elem.value === "0") {
    elem.value = "1";
   }

answered Jul 18 '19 at 10:23

Clarity

10,730
2
25
35

score 1 · Answer 3 · answered Jul 18 '19 at 10:25

This is simple :

function change() {
  var elem = document.getElementById("home-header_on_offer");
  if (elem.value == "1") {
    elem.value = "0";
    alert(elem.value);
  } else {
    elem.value = "1";
    alert(elem.value);
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="label" style="right: -20px;position: relative">On offer</label>
<label class="switchCr">
<br>
  <input onclick="change()" type="checkbox" name="custom7" value="1" id="home-header_on_offer"
checked="checked">
  <span class="sliderCr round select" id="my-career-search-header" style="border-radius: 0px;top: -52px;width: 255px;height: 33px;border-width: 1px;border-color:  #bbb;position: relative;box-shadow: none;"onclick="myFunction2()"></span>
</label>

User863 · Answer 4 · 2019-07-18T10:33:41.890

The problem is = instead of == (= vs ===)

Alternate solutions for toggling

function change() {
  var elem = document.getElementById("home-header_on_offer");
  elem.value = 1 - elem.value;
  console.log(elem.value)
}

<label class="label" style="">On offer</label>
<input onclick="change()" type="checkbox" name="custom7" value="1" id="home-header_on_offer" checked="checked">

OR Using checked property with unary plus

function change() {
  var elem = document.getElementById("home-header_on_offer")
  console.log(+elem.checked)
}

<label class="label" style="">On offer</label>
<input onclick="change()" type="checkbox" name="custom7" value="1" id="home-header_on_offer" checked="checked">

Return back value at input with javascript

4 Answers4