Fatal编程技术网
  • javascript/
  • Javascript 仅当按钮具有特定值属性时才执行某些代码

Javascript 仅当按钮具有特定值属性时才执行某些代码

javascript

Javascript 仅当按钮具有特定值属性时才执行某些代码,javascript,Javascript,我试图创建一个类似于泵的函数，这样它只在按钮有“开”值时才执行代码。我已经做了以下工作，但这只是在一个循环中被锁定，有人能帮忙吗，谢谢 <div id="main"> <div id="intruc" class="instructions">Instructions go in here</div> <input type="button" value="On" id="onoff" onclick="pump();">

我试图创建一个类似于泵的函数，这样它只在按钮有“开”值时才执行代码。我已经做了以下工作，但这只是在一个循环中被锁定，有人能帮忙吗，谢谢

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


这里有指示
功能泵（按钮）{
控制台日志（“泵”）；
currentvalue=document.getElementById（'onoff'）。值；
如果（当前值=“关闭”）{
document.getElementById（“onoff”）.value=“On”；
currentvalue==“打开”
运行（当前值）
}
否则{
document.getElementById（“onoff”）.value=“Off”；
currentvalue==“关闭”
运行（当前值）
}
}
功能运行（状态）{
控制台日志（“运行”）；
控制台日志（状态）；
如果（状态==“打开”）{
log（“执行所有代码”）
运行（状态）
}
}
我想你要找的是
鼠标下移
事件，我制作了一个干净的演示，你可以在你的代码中进行调整：

HTML

<button id="run">Off</button>
“标志”
runCode
确定代码是否应该运行

示例

编辑1

您分配的值不正确，您使用的是
=
而不是
=

我使您的代码正常工作。只需做以下更改：

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


这里有指示
函数泵（）{
currentvalue=document.getElementById（'onoff'）。值；
如果（当前值=“开”）{
document.getElementById（“onoff”）.value=“Off”；
show（）；
}
否则{
document.getElementById（“onoff”）.value=“On”；
返回false；
}
}
函数show（）
{
警报（“您要重复的代码”）；
show（）；
}
您可以使用窗口变量作为
show（）的检查器是否工作。
我刚刚编辑了您的全部代码，现在它工作了



功能泵（）{
控制台日志（“泵”）；
currentvalue=document.getElementById（'onoff'）。值；
如果（当前值=“关闭”）{
document.getElementById（“onoff”）.value=“On”；
//currentvalue=“On”
//运行（当前值）
}
否则{
document.getElementById（“onoff”）.value=“Off”；
currentvalue==“关闭”
//运行（当前值）
}
}



这里有指示

我认为这样做的正确方法包括使用间隔

您可以在此处阅读这些内容：





（您也可以找到有关w3schools的信息，但我更推荐MDN。）

您可以这样做：

（两个文件需要位于同一目录中）

index.html
如您所见，我还建议将函数分配给带有事件侦听器的按钮，而不是旧的
onload=“action（）”
方式

（更多信息请点击此处：



下面是您应该使用它的原因：

)


注：我尝试使用JSFIDLE和codepen，但它们似乎不能很好地处理事件侦听器…
下面是一个简单的示例，用于pump按钮值：


感谢大家的支持，我决定使用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")

    }

}




这里有指示
var switchStatus=document.getElementById（'onoff'）.value；
console.log（“开始时的开关状态=”，switchStatus）
var run=setInterval（函数（）{pump（switchStatus）}，3000）；
函数onOff（）{
控制台日志（“onOff”）；
switchStatus=document.getElementById（'onoff'）。值；
如果（开关状态=“关闭”）{
document.getElementById（“onoff”）.value=“On”；
switchStatus=“On”
}
否则{
document.getElementById（“onoff”）.value=“Off”；
switchStatus=“关闭”
}
}
功能泵（状态）{
控制台日志（“泵”）；
控制台日志（状态）；
如果（状态=“打开”）{
log（“执行所有代码”）
}
}

您正在寻找鼠标下降事件吗？我认为您不应该使用
currentvalue==Off
或
on
而应该使用
currentvalue=Off
或
on
…而且您的上次运行函数不需要MONIAC，pump（）？您正在创建Phillips机器吗？感谢您的帮助，但这两个工具都没有告诉我如何在按钮打开时使函数在其中的代码中重复循环。他们只做了一次…或者我只是太胖了，错过了什么？（不必回答最后一点）为什么要重复循环代码。您希望仅当按下的按钮值为ON时运行部分代码。。。。现在正是这样。。。。。现在还有什么？我想让它表现得像水被泵绕着一个回路。当按钮在函数中的代码上时，重复执行，事情就会发生，即循环的不同部分中的水会根据拉动的杠杆做不同的事情。当按钮关闭时，水停止在循环中流动（代码停止重复执行），所有stopsOk显示您想要重复执行的代码，，，，然后我们可以决定如何执行

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



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



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';
    }
}



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

    }

}