CODEWITHSUNDEEP
javascript
Bob Haslett
Bob Haslett

Reputation: 1103

Do some code only while a button has a specific value attribute

I'm trying to create a function that acts like a pump, so it will execute code only while a button has an 'on' value. I've done the following but this just gets locked in a loop, could someone help, thanks

<div id="main">
    <div id="intruc" class="instructions">Instructions go in here</div>
    <input type="button" value="On" id="onoff" onclick="pump();">
    <div id="moniac"></div>

</div>

<script>

function pump(button) {
    console.log("pump");
    currentvalue = document.getElementById('onoff').value;
    if(currentvalue == "Off"){
        document.getElementById("onoff").value="On";
        currentvalue == "On"
        run(currentvalue)
    }
    else{
        document.getElementById("onoff").value="Off";
        currentvalue == "Off"
        run(currentvalue)
    }
}

function run(status) {
    console.log("run");
    console.log(status);
    if (status==="On"){
        console.log("do all the code")
        run(status)
    }

}





</script>

Upvotes: 1

Views: 117

Answers (6)

Bob Haslett
Bob Haslett

Reputation: 1103

Thanks everyone for there input, I decided to use the setInterval function to execute the function I needed. In this example I've got it set to every three seconds for testing but would have it running much faster on final piece. My solution looks like this:

<div id="main">
    <div id="intruc" class="instructions">Instructions go in here</div>
    <input type="button" value="Off" id="onoff" html="Turn on" onclick="onOff();">
</div>

<script>

var switchStatus=document.getElementById('onoff').value;
console.log("Switch status at the start= ",switchStatus)
var run = setInterval(function(){ pump(switchStatus) }, 3000);

function onOff() {
    console.log("onOff");
    switchStatus=document.getElementById('onoff').value;
    if(switchStatus =="Off"){
        document.getElementById("onoff").value="On";
        switchStatus = "On"
    }
    else{
        document.getElementById("onoff").value="Off";
        switchStatus = "Off"
    }
}

function pump(status) {
    console.log("pump");
    console.log(status);
    if (status=="On"){
        console.log("do all the code")

    }

}

Upvotes: 0

Amar Singh
Amar Singh

Reputation: 5622

I made your code work . Just make these changes:

   <div id="main">
    <div id="intruc" class="instructions">Instructions go in here</div>
    <input type="button" value="On" id="onoff" onclick="pump();">
    <div id="moniac"></div>

</div>

<script>

function pump() { 

    currentvalue = document.getElementById('onoff').value;
    if(currentvalue == "On"){
        document.getElementById("onoff").value="Off";
        show();

    }
    else{
        document.getElementById("onoff").value="On";
       return false;
    }
}



function show()
{

alert(' your code which you want to repeat');


show();
}
</script>

You can use window variable as a checker for show(); to work or not.

Upvotes: 0

Swiffy
Swiffy

Reputation: 4693

Here is a simple example that uses data-attribute(s) for the pump button value: https://jsfiddle.net/ahvonenj/pL9qf5mq/

document.getElementById('pumpbutton').addEventListener('click', pump);

function pump()
{
    var pumpState = this.dataset.value;

    if(pumpState === 'true')
    {
        this.dataset.value = 'false';
        this.value = 'OFF';
    }
    else
    {
        this.dataset.value = 'true';
        this.value = 'ON';
    }
}

Upvotes: 0

Isti115
Isti115

Reputation: 2748

I think the proper way of doing something like this would include using intervals.

You can read about those here:
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval
(You can also find information on w3schools, but I rather recommend MDN.)

You could do something like this:
(the two files need to be in the same directory)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pump</title>
    <script type="text/javascript" src="scripts.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="main">
        <div id="intructions" class="instructions">Instructions go in here</div>
        <input id="pumpToggleButton" type="button" value="OFF">
        <div id="pumpOutput">0</div>
    </div>
  </body>
</html>

scripts.js

window.addEventListener("load", init, false);

var pumpToggleButton;

var pumpValue = 0, pumpState = false, pumpInterval;

var pumpFrequency = 100;

function init() {
  pumpToggleButton = document.getElementById("pumpToggleButton");
  pumpToggleButton.addEventListener("click", pumpToggle, false);
}

function pumpAction() {
  pumpValue += 5;
  document.getElementById("pumpOutput").innerHTML = pumpValue;
}

function pumpToggle() {
  pumpState = !pumpState;

  pumpToggleButton.value = pumpState ? "ON" : "OFF";

  if (pumpState) {
    pumpInterval = setInterval(pumpAction, pumpFrequency);
  } else {
    clearInterval(pumpInterval);
  }
}

As you can see, I also recommend assigning the function to the button with an event listener instead of the old onload="action()" way.

(More info on that here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
and here is why you should use it:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Why_use_addEventListener )

ps.: I tried to use jsfiddle and codepen, but they don't seem to handle event listeners too well...

Upvotes: 1

Mostafa
Mostafa

Reputation: 1009

I just edited your entire code, now it's work

function pump() {
    console.log("pump");
    currentvalue = document.getElementById('onoff').value;
    if(currentvalue == "Off"){
        document.getElementById("onoff").value="On";
        //currentvalue = "On"
        //run(currentvalue)
    }
    else{
        document.getElementById("onoff").value="Off";
        currentvalue == "Off"
        //run(currentvalue)
    }
}
<div id="main">
    <div id="intruc" class="instructions">Instructions go in here</div>
    <input type="button" value="On" id="onoff" onclick="pump();">
    <div id="moniac"></div>

</div>

Fiddle ( But not work correctly on fiddle , test it on local)

Upvotes: 0

Script47
Script47

Reputation: 14540

I think what you are looking for is the mousedown event, I made a clean demo which you can adapt in your code:

HTML

<button id="run">Off</button>

JavaScript

var runCode = false;
var button = document.getElementById("run");

function pump() 
{
    if (runCode) {
        /** Code to run, when on. **/
        button.innerText = "Off";
        runCode = false;
    } else {
        button.innerText = "On";
        runCode = true;   
    }
}

button.addEventListener("mousedown", pump);

The "flag" runCode determines if the code should run or not.

Example

http://jsfiddle.net/coea3ckb/2/

Edit 1

You are assigning that value incorrectly, you are using == instead of =.

Upvotes: 1

Related Questions