如何将数据输入到 Javascript 以进行客户端处理

How can I input data to Javascript for client-side processing?

本文关键字:客户端 处理 Javascript 数据 输入      更新时间:2023-09-26

我对JavaScript比较陌生,我正在开发一个新的应用程序。根据四个下拉选择的结果,我想计算并显示一个宣布结果的文本框。下面的代码允许我在 html 表单上进行选择并按"提交"按钮,但没有返回任何结果。

我很难调试,因为我不明白如何在屏幕上获得定期输出(document.write 似乎不起作用(来解释程序流。我什至不确定 js 是否正在运行...我是否需要以某种方式从 HTML 中调用我的 js?我是否需要将我的 js 存储在外部文件中并调用该外部文件?

谢谢!

<html>
<head>
    <SCRIPT type="text'Javascript" EVENT="onclick">
    var valueCS ;
    var valueV ;
    var valueVCS ;
    var valueStorm ;
    var finalValue = valueCS + valueV + valueVCS + valueStorm;
    var startOutage ;
    var outageEnd ;
    document.write="total is "+finalValue;
    if(finalValue==0000) {startOutage="28"; outageEnd="1";} else
      (finalValue==0001) {startOutage="27"; outageEnd="1";} else
      (finalValue==1110) {startOutage="22"; outageEnd="4";} else
      (finalValue==1111) {startOutage="24"; outageEnd="4";} else
      document.write("Invalid entries")
    document.write("Start Outage: "+startOutage<br>"Outage End: "+outageEnd)
    </SCRIPT>
</head>
<body>
<form id = "outageSelector" method="post contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups">
    <fieldset>
        <legend><h1>Please choose the status of each system</h1></legend>
        <label>Is the contact server up?</label>
        <select id="contServer" name="contServer">
            <option valueCS=1000>Up</option>
            <option valueCS=0>Down</option>
        </select><br>
        <label>Is the Vista server up?</label>
        <select id="vistaServer" name="vistaServer">
            <option valueV=100>Up</option>
            <option valueV=0>Down</option>
        </select><br>
        <label>Is VistaCS up?</label>
        <select id="vistaCSServer" name="vistaCSServer">
            <option valueVCS=10>Up</option>
            <option valueVCS=0>Down</option>
        </select><br>
        <label>Is the outage due to a storm?</label>
        <select id="storm" name="storm">
            <option valueStorm=1>Yes</option>
            <option valueStorm=0>No</option>
        </select><br>
        <input type="submit" name="submitServerStatus" value="View Outage Groups" />
    </fieldset>
</form>
</body>
</html>

您遇到的问题在于您的表单。 您的所有下拉列表都具有相同的名称。 此外,您的值格式不正确。

<form id="outageSelector" method="post" action="[SOME_DESTINATION]">
    <fieldset>
        <legend><h1>Please choose the status of each system</h1></legend>
        <label>Is the contact server up?</label>
        <select id="contServer" name="contServer">
            <option value=1000>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is the Vista server up?</label>
        <select id="vistaServer" name="vistaServer">
            <option value=100>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is VistaCS up?</label>
        <select id="vistaCSServer" name="vistaCSServer">
            <option value=10>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is the outage due to a storm?</label>
        <select id="storm" name="storm">
            <option value=1>Yes</option>
            <option value=0>No</option>
        </select><br>
        <input type="submit" name="submitServerStatus" value="View Outage Groups" />
    </fieldset>
</form>

这是在幕后与开机自检一起发送的:

contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups

编辑:这是一个修订后的js函数。

<script>
  function checkValues(){
    var e;
    e = document.getElementById("contServer");
    var valueCS = parseInt(e.options[e.selectedIndex].value);
    e = document.getElementById("vistaServer");
    var valueV = parseInt(e.options[e.selectedIndex].value);
    e = document.getElementById("vistaCSServer");
    var valueVCS = parseInt(e.options[e.selectedIndex].value);
    e = document.getElementById("storm");
    var valueStorm = parseInt(e.options[e.selectedIndex].value);
    var finalValue = valueCS + valueV + valueVCS + valueStorm;
    var startOutage = -1;
    var outageEnd = -1;        
    if(finalValue == 0) {
      startOutage = "28";
      outageEnd = "1";
    } else if (finalValue == 1) {
      startOutage = "27";
      outageEnd = "1";
    } else if (finalValue == 1110) {
      startOutage = "22";
      outageEnd = "4";
    } else if (finalValue == 1111) {
      startOutage = "24";
      outageEnd = "4";
    }
    var msg = "total: " + finalValue;        
    if(startOutage == -1){
      msg += " | Start Outage: " + startOutage + " | Outage End: " + outageEnd;
    }else{
      msg += " | Invalid entries";
    }
    alert(msg);
  }
</script>

您需要修改表单才能使用。

<form id="outageSelector" method="post" action="" onsubmit="checkValues()"> ...

根本不使用document.write,而是使用 DOM 操作。阅读这些介绍。

此外,您还需要了解事件驱动编程。您将需要 domevents(介绍(,但与服务器的异步通信也是基于事件的。 <SCRIPT type="text'Javascript" EVENT="onclick">不是它的工作方式:-(

要在屏幕上获得输出,您应该将console.log与Firebug,Chrome开发工具或IE开发工具一起使用。请参阅是否有单个 HTML5、JavaScript 和 CSS 调试器?

代码中一个明显的问题是

 if(finalValue=1110)

应该是(双等于进行比较(

if(finalValue==1110)

但是还有另一个问题,以零开头的数字是八进制。那是

010 == 8 // true

好像你在追求位掩码

var mask = 0;
var flagA = 1, flagB = 2, flagC = 4;
// Add flagA and flagB to the mask
mask = mask | flagA; // or mask |= flagA
mask |= flagB;
// Now you can test which flags are on using bit testing
// is flagA set?
console.log(mask & flagA) // truthy value
// is flagC set?
console.log(mask & flagC) // false (0)

https://developer.mozilla.org/en/JavaScript/Reference/Operators/Bitwise_Operators

Juan已经给了你控制台.log,这非常有用,而且可能是最好的。 Firebug,Chrome Dev和IE dev还允许您添加断点并监视局部和全局变量。

黑暗时代的旧调试风格包括使用 alert("some string here"); 获取弹出窗口或向页面添加调试元素,然后填充它

document.getElementById("debugElement").innerHTML("some string here");