我想創建一個函數，像一個泵，所以它只會執行代碼，而一個按鈕有一個'開'值。我已經做了以下但這恰恰被鎖定在一個循環中，可能有人幫助，謝謝只做一些代碼，而一個按鈕有一個特定的值屬性

<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>

來源

2015-10-15 Bob Haslett

您是否在尋找mousedown事件？ https://developer.mozilla.org/en/docs/Web/Events/mousedown –

我認爲你不應該使用'currentvalue == Off'或'on'而不是'currentvalue = Off'或'on' .. ..也是你的最後一個運行函數不需要 – Mostafa

我想你正在尋找的是mousedown事件，我做了一個乾淨的演示，你可以在你的適應代碼：

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);

「flag」runCode決定代碼是否應該運行。

例

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

編輯1

你被錯誤地分配該值，您正在使用==代替=。

來源

2015-10-15 10:24:10 Script47

我讓你的代碼工作。只是讓這些變化：

<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>

您可以使用窗口變量作爲檢查爲show();工作與否。

來源

2015-10-15 10:37:43

感謝您的幫助球員，但這兩個都沒有告訴我如何讓這個功能在按鈕打開時重複循環遍歷代碼。他們只做過一次......或者我只是在這裏厚厚而缺少一些東西？（你不必回答最後一位） –

爲什麼你想重複循環代碼。只有當按下的按鈕值爲ON時，你才需要運行一部分代碼....現在正在發生.....現在還有其他什麼？ –

我希望它能像水一樣循環流動。當按鈕處於函數中的代碼被重複執行時，事情就會發生，也就是說循環的不同部分中的水將根據拉動的槓桿執行不同的操作。當按鈕被關閉時，水停止在循環周圍流動（代碼停止重複執行），一切都停止。 –

我剛纔編輯整個代碼，現在它的工作

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（但不是在小提琴正常工作，測試它在本地）

來源

2015-10-15 10:41:28 Mostafa

我認爲正確的方法做這樣的事情將包括使用區間。

您可以瞭解那些在這裏：
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval
（您也可以找到W3Schools的信息，但是我比較推薦MDN）

你可以做這樣的事情：
（中兩個文件必須在同一目錄下）

的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>

腳本。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); 
    } 
}

正如你所看到的，我也推薦使用事件偵聽器，而不是舊的onload="action()"方式分配功能的按鈕。

PS：我試圖用的jsfiddle和codepen，但似乎他們不處理事件偵聽器太清楚......

來源

2015-10-15 11:34:50 Isti115

下面是一個使用data-attribute(s)的泵按鈕值一個簡單的例子：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'; 
    } 
}

來源

2015-10-15 12:17:01 Piwwoli

感謝大家的輸入，我決定使用setInterval函數來執行我需要的功能。在這個例子中，我將它設置爲每三秒進行一次測試，但在最後一塊時它的運行速度要快得多。我的解決方案如下所示：

<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") 

    } 

}

來源

2015-10-15 12:19:47

只做一些代碼，而一個按鈕有一個特定的值屬性

回答

的index.html

腳本。JS

相關問題