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

Question

I'm relatively new to JavaScript and I am working on a new application. 我对JavaScript相对较新，正在开发一个新应用程序。 Based on the results of four drop-down selections, I would like to calculate and display a text box announcing the result. 基于四个下拉选择的结果，我想计算并显示一个文本框，宣布结果。 The code below allows me to make my selections on the html form and press the "submit" button, but no results are returned. 下面的代码使我可以在html表单上进行选择，然后按“提交”按钮，但不会返回任何结果。

I'm having a hard time debugging because I don't understand how to get periodic output on screen (document.write doesn't seem to work) to interpret program flow. 我很难调试，因为我不了解如何在屏幕上获取定期输出（document.write似乎不起作用）来解释程序流。 I'm not even sure if the js is running...do I somehow need to call my js from within the HTML? 我什至不确定js是否正在运行...我是否需要从HTML内调用js？ Do I need to store my js in an external file and call that external file? 我需要将我的js存储在一个外部文件中并调用该外部文件吗？

Thanks! 谢谢！

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

Answer 1

To get output on the screen, you should use console.log along with Firebug, Chrome dev tools, or IE dev tools. 要在屏幕上获得输出，您应该将console.log与Firebug，Chrome开发工具或IE开发工具一起使用。 See Is there a single HTML5, JavaScript, and CSS debugger? 请参阅是否有一个HTML5，JavaScript和CSS调试器？

One obvious problem in your code is 您的代码中一个明显的问题是

 if(finalValue=1110)

Should be (double equals for comparison) 应该是（双等于比较）

if(finalValue==1110)

But there's another problem, a number that starts with a zero is an octal. 但是还有另一个问题，以零开头的数字是八进制。 That is 那是

010 == 8 // true

It seems like you're after a bitmask 好像你在找一个位罩

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 https://developer.mozilla.org/en/JavaScript/Reference/Operators/Bitwise_Operators

Answer 2

Don't use document.write at all, but DOM manipulation. 完全不使用document.write ，而是使用DOM操作。 Read these introductions . 阅读这些介绍。

Also, you will need to learn about event-driven programming . 另外，您将需要了解事件驱动的编程。 You'll need domevents ( intro ), but also asynchronous communication to the server is event-based. 您将需要domevents （ intro ），但与服务器的异步通信也是基于事件的。 <SCRIPT type="text\\Javascript" EVENT="onclick"> is not the way it works :-) <SCRIPT type="text\\Javascript" EVENT="onclick">不是它的工作方式:-)

Answer 3

The problem you're having is with your FORM. 您遇到的问题与您的表格有关。 All of your dropdowns had the same name. 您所有的下拉菜单都具有相同的名称。 Also your values were incorrect formatted. 另外，您的值格式不正确。

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

This is sent along w/ the POST behind the scenes: 这是在后台通过POST发送的：

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

EDIT: here's a revised js function. 编辑：这是一个修订的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>

You'll need to modify your form to use. 您需要修改表格才能使用。

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

Answer 4

Juan already gave you console.log, which is very useful, and probably the best. Juan已经给了您console.log，它非常有用，而且可能是最好的。 Firebug, Chrome Dev and IE dev will also allow you to add break points and watch local and global variables. Firebug，Chrome开发人员和IE开发人员还将允许您添加断点并查看局部和全局变量。

Older styles of debugging from the dark ages would include using alert("some string here"); 从黑暗时代开始的较旧的调试方式将包括使用alert("some string here"); to get a popup or add a debug element to your page and then populating it with 获取弹出窗口或向页面添加调试元素，然后使用填充

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

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

问题描述

4 个解决方案

解决方案1
1 2012-05-17 15:42:53

解决方案2
1 2012-05-17 15:52:18

解决方案3
1 已采纳 2012-05-17 16:21:21

解决方案4
0 2012-05-17 15:47:52

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

问题描述

4 个解决方案

解决方案1 1 2012-05-17 15:42:53

解决方案2 1 2012-05-17 15:52:18

解决方案3 1 已采纳 2012-05-17 16:21:21

解决方案4 0 2012-05-17 15:47:52

解决方案1
1 2012-05-17 15:42:53

解决方案2
1 2012-05-17 15:52:18

解决方案3
1 已采纳 2012-05-17 16:21:21

解决方案4
0 2012-05-17 15:47:52