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

我是JavaScript新手，我正在开发一个新的应用程序。根据四个下拉选择的结果，我想计算并显示一个文本框来宣布结果。下面的代码允许我在html表单上进行选择，然后按下“提交”按钮，但不返回任何结果。如何将数据输入到Javascript以进行客户端处理？

我很难调试，因为我不明白如何在屏幕上获取定期输出（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>

来源

2012-05-17 dwwilson66

你用什么浏览器进行调试？ –

@ltiong_sh - IE8 ......这是我在这里唯一可以获得的一个...：\ – dwwilson66

Dang，一个只能访问IE的Web开发者？你在监狱工作吗？ –

您遇到的问题与您的表格。所有的下拉菜单都有相同的名称。此外，您的值格式不正确。

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

这是沿着瓦特/ POST发送幕后：

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

来源

2012-05-17 16:21:21

Aha。我可以在地址栏中看到参数，并随着更改下拉选项而变化。但是，我没有收到结果。没有错误，我可以看到，但所有的下拉值返回到它们的原始状态。我看不到我的输出......'document.write（“Start Outage：”+ startOutage
“Outage End：”+ outageEnd）'。 :( – dwwilson66

如果你不是真的发布任何地方..你可以离开'行动'。 –

很好，@ltiong_sh。我仍然有几个问题;'finalValue'的返回值不断回来作为一个对象它的值显示为'NaN';我怀疑我需要类似于Java的deepToString（）的东西来读取它吗？你是否知道类似的东西？我将把它作为一个单独的问题发布... – dwwilson66

要在屏幕上得到输出，你应该使用Firebug，Chrome浏览器开发工具，或IE开发工具一起使用console.log。见Is there a single HTML5, JavaScript, and CSS debugger?

在代码中一个明显的问题是

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

来源

2012-05-17 15:42:53

@ltiong_sh - findOutageGroups来自更早的迭代...更新代码 – dwwilson66

还有很多其他问题...我没有提到它们。我想，一旦他们弄清楚如何使用开发工具，我会让OP找出它们。 –

感谢==提示和八进制提醒。完全隔开。我认为我不应该有这方面的问题;我生成一个二进制数来表示yes/no开关的四个开/关位置...第一个插槽为1000或0，第二个为100或0，然后将它们相加。然而，这引出了一个问题：1000 + 100 + 10 = 1110还是13？这可能是我的问题.... – dwwilson66

胡安已经给你CONSOLE.LOG，这是非常有用后的时候，也可能是最好的。 Firebug，Chrome Dev和IE dev也将允许您添加中断点并观察本地和全局变量。

旧风格从黑暗时代的调试将包括使用alert("some string here");，弹出或调试元素添加到您的网页，然后用

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

来源

2012-05-17 15:47:52

填充它，不要使用document.write所有，但DOM操纵。阅读these introductions。您也需要了解event-driven programming。你需要domevents（intro），但是与服务器的异步通信也是基于事件的。 <SCRIPT type="text\Javascript" EVENT="onclick">是不是它的工作方式:-)

来源

2012-05-17 15:52:18 Bergi

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

回答

相关问题