增减计数器JS

Question

单击按钮时，我需要增加和减少计数器。

 const checkbox = document.getElementById('cb_enabled'), increment = document.getElementById('btn_increment'), decrement = document.getElementById('btn_decrement'), counter = document.getElementById('js-counter').innerHTML; checkbox.addEventListener("change", function(checkbox) { if (this.checked === false) { increment.disabled = true; decrement.disabled = true; } else { increment.disabled = false; decrement.disabled = false; } }); increment.onclick = () => { counter.innerHTML = 1; } decrement.onclick = () => { counter.innerHTML = 0; }

 <h1 id="js-counter"> 0 </h1> <button id="btn_decrement" type="button"> Decrement </button> <button id="btn_increment" type="button"> Increment </button> <label for="cb_enabled"> Enable/Disable counter <input id="cb_enabled" type="checkbox" checked /> </label>

但是我不知道如何增加和减少数字（在这种情况下，将元素放入js-counter）。 有任何想法吗？

Answer 1

counter应该只是元素，而不是它的innerHTML 。

要增加它，获取它的内容，将其解析为一个数字，加或减 1，然后将其写回元素。

 const checkbox = document.getElementById('cb_enabled'), increment = document.getElementById('btn_increment'), decrement = document.getElementById('btn_decrement'), counter = document.getElementById('js-counter'); checkbox.addEventListener("change", function(checkbox) { if (this.checked === false) { increment.disabled = true; decrement.disabled = true; } else { increment.disabled = false; decrement.disabled = false; } }); function add_to_counter(increment) { let cur_count = parseInt(counter.innerText); let new_count = cur_count + increment; counter.innerText = new_count; } increment.onclick = () => { add_to_counter(1); } decrement.onclick = () => { add_to_counter(-1); }

 <h1 id="js-counter"> 0 </h1> <button id="btn_decrement" type="button"> Decrement </button> <button id="btn_increment" type="button"> Increment </button> <label for="cb_enabled"> Enable/Disable counter <input id="cb_enabled" type="checkbox" checked /> </label>

Answer 2

保持对 counter 元素的引用而不是它的 innerHTML 属性，并且不要忘记在递增之前parseInt字符串值。

 const checkbox = document.getElementById('cb_enabled'), increment = document.getElementById('btn_increment'), decrement = document.getElementById('btn_decrement'), counter = document.getElementById('js-counter'); checkbox.addEventListener("change", function(checkbox) { if (this.checked === false) { increment.disabled = true; decrement.disabled = true; } else { increment.disabled = false; decrement.disabled = false; } }); increment.onclick = () => { const num = parseInt(counter.innerHTML); counter.innerHTML = num + 1; } decrement.onclick = () => { const num = parseInt(counter.innerHTML); counter.innerHTML = num - 1; }

 <h1 id="js-counter"> 0 </h1> <button id="btn_decrement" type="button"> Decrement </button> <button id="btn_increment" type="button"> Increment </button> <label for="cb_enabled"> Enable/Disable counter <input id="cb_enabled" type="checkbox" checked /> </label>

Answer 3

问题在于计数器初始化counter = document.getElementById("js-counter").innerHTML您在初始化和分配期间都获得了 innerHTML 引用。

counter.innerHTML = 1;

 const checkbox = document.getElementById('cb_enabled'), increment = document.getElementById('btn_increment'), decrement = document.getElementById('btn_decrement'); counter = document.getElementById("js_counter"); checkbox.addEventListener("change", function(checkbox) { if (this.checked === false) { increment.disabled = true; decrement.disabled = true; } else { increment.disabled = false; decrement.disabled = false; } }); increment.onclick = () => { counter.innerHTML = 1; } decrement.onclick = () => { counter.innerHTML = 0; }

 <h1 id="js_counter"> 0 </h1> <button id="btn_decrement" type="button"> Decrement </button> <button id="btn_increment" type="button"> Increment </button> <label for="cb_enabled"> Enable/Disable counter <input id="cb_enabled" type="checkbox" checked /> </label>

Answer 4

我可以从我的 ReactNative 中为您提供递增和递减计数器的功能。下面有您的 HTML 项目的功能

const [num, setNum] = useState(0);

  function incre() {
    setNum(num + 1);
  }
  function decre() {
    if (num > 0) {
      setNum(num - 1);
    } else {
      Alert.alert('zero is the limit');
    }

现在只需在应用程序的 Div 或视图中显示计数器，然后在单击或按下按钮时调用 function。

     <View style={{width: '100%'}}>
            <Text>
              Count
            </Text>
            <Text>
              {num}
            </Text>
<TouchableOpacity
            style={{alignSelf: 'center'}}
            onPress={() => {
              incre();
              decre();
            }}>
</TouchableOpacity>

如果它是 HTML 中的按钮

<button id="btn_decrement" type="button"  onclick={() => {
              incre();
             
            }}>> Decrement </button>
<button id="btn_increment" type="button" onclick={() => {
              decre();
             
            }}>> Decrement </button>

HTML 的功能；

 function incre() {
     
          var num=num+1;
      
          }

    function decre() {
            
              var num=num-1;
              
              }