onclick不激活指定的功能

时间:2013-04-12 01:34:51

标签: javascript html function input onclick

到目前为止,我没有成功地让第一个输入按钮启动表移位功能。目前我正在测试功能。我已经尽力通过一些教科书和在线搜索来审查格式,我想我的语法是正确的。寻找关于为什么tableShifts()没有从按钮Calculate Shifts中引用的建议。谢谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Couch Shifts</TITLE>
<script type="text/javascript">     

    function openWindow() 
        {
            window.open('','',"toolbar=no, menubar=no, directories=no, status=no, resizable=no, scrollbars=no, height=120,width=510");
        }

    function patientPosition()
        {
            var x = 1;
            var Position = document.getElementbyId("Position").value;
            switch (patPosition){
            case "HFS":
                x = x*1         
            case "HFP":
                x = x*-1            
            case "FFS":
                x = x*1         
            case "FFP":
                x = x*-1        
            }
        }

    function tableShifts() 
        {
            alert("test");
        }

    function parameters()
       {           
            var curVert = Number(document.getElementById("curVert").value),
            var curLat = Number(document.getElementById("curLat").value), 
            var curLong = Number(document.getElementById("curLong").value), 

            var pinVert = Number(document.getElementById("curVert").value),
            var pinLat = Number(document.getElementById("curVert").value),
            var pinLong = Number(document.getElementById("curVert").value);

            document.getElementById("gotoVert").value = curVert - pinVert;
            document.getElementById("gotoLat").value  = curLat + pinLat;
            document.getElementById("gotolong").value = curLong - pinLong; 
            }

</script>
  </HEAD>
  <BODY>
<select Id="Position">
    <option value="HFS">Head First Supine</option>
    <option value="HFP">Head First Prone</option>
    <option value="FFS">Feet First Supine</option>
    <option value="FFP">Feet First Prone</option>
</select><br><br>
<div style="margin-bottom: 120px;">
<style>
    label { float: left; width: 35px; }
    #column1{ float: left; position: relative; z-index: 0; width: 150px;}
    #column2{ float: left; position: relative; z-index: 2; width: 150px;}
    #column3{ float: left; position: relative; z-index: 1; width: 125px;}
    #button { position: absolute; }
</style>
<div id="column1">Current Position</br></br>
    <label for="Vert">Vert:</label>
    <input type="text", id="curVert" size="10" value="" /></br>
    <label for="Lat">Lat:</label>
    <input type="text" size="10", id="curLat" value="" /></br>
    <label for="Long">Long:</label>
    <input type="text" size="10", id="curLong" value="" />  
</div>

<div id="column2">Pinnicle Shifts<br><br>
    <label for="Vert">Vert:</label>
    <input type="text", id="pinVert" size="10" value="" /></br>
    <label for="Lat">Lat:</label>
    <input type="text", id="pinLat" size="10" value="" /></br>
    <label for="Long">Long:</label>
    <input type="text", id="pinLong" size="10" value="" />      
</div>

<div id="column3">Calculated Shifts</br></br>
    <label for="Vert">Vert:</label>
    <input type="text", id="gotoVert" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/></br>
    <label for="Lat">Lat:</label>
    <input type="text", id="gotoLat" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/></br>
    <label for="Long">Long:</label>
    <input type="text", id="gotoLong" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/>       
</div><br />
</div>

<div id="button">
    <input type = "button" style="margin-top: 10px;" value="Calculate Shifts" onclick="tableShifts();" />
    <input type = "button" style="margin-top: 10px;" value="Reset" onclick=""/>
 </div> 
</BODY>
</HTML>

3 个答案:

答案 0 :(得分:0)

函数tableShiftsss中的

    var gotoVert.value = curVert - pinVert;
    var gotoLat.value = curLat + pinLat;
    var gotolong.value = curLong - pinLong;

这不是有效的EcmaScript方言(如javascript)。

您可能希望将其更改为:

function tableShifts(){           
    var curVert = Number(document.getElementById("curVert").value),
         curLat = Number(document.getElementById("curLat").value), 
        curLong = Number(document.getElementById("curLong").value), 

        pinVert = Number(document.getElementById("curVert").value),
         pinLat = Number(document.getElementById("curVert").value),
        pinLong = Number(document.getElementById("curVert").value);

    document.getElementById("gotoVert").value = curVert - pinVert;
    document.getElementById("gotoLat").value  = curLat + pinLat;
    document.getElementById("gotolong").value = curLong - pinLong; 
}
祝你好运!

答案 1 :(得分:0)

在你的tableShiftsss()中,你说:

var gotoVert.value

虽然它应该是:

document.getElementById("gotoVert").value

这适用于所有这三个陈述。

此外,value函数返回的字符串不是int,因此您不能只添加结果。您将需要转换为类似的int:

var curVert = parseInt(document.getElementById("curVert").value);

您可能有其他语法错误,但这取决于您使用浏览器Javascript控制台进行调试。

答案 2 :(得分:0)

试试这个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <HTML>
        <HEAD>
        <TITLE>Couch Shifts</TITLE>
        <script type="text/javascript">     



            function tableShifts() 
                {
                    alert("test");
                }

        function openWindow() 
                {
                    window.open('','',"toolbar=no, menubar=no, directories=no, status=no, resizable=no, scrollbars=no, height=120,width=510");
                }

          function patientPosition()
                {
                    var x = 1;
                    var Position = document.getElementbyId("Position").value;
                    switch (patPosition){
                    case "HFS":
                        x = x*1         
                    case "HFP":
                        x = x*-1            
                    case "FFS":
                        x = x*1         
                    case "FFP":
                        x = x*-1        
                    }
                }

             function parameters()
               {           
                    var curVert = Number(document.getElementById("curVert").value);
                    var curLat = Number(document.getElementById("curLat").value);
                    var curLong = Number(document.getElementById("curLong").value); 

                   var pinVert = Number(document.getElementById("curVert").value);
                    var pinLat = Number(document.getElementById("curVert").value);
                    var pinLong = Number(document.getElementById("curVert").value);

                    document.getElementById("gotoVert").value = curVert - pinVert;
                    document.getElementById("gotoLat").value  = curLat + pinLat;
                    document.getElementById("gotolong").value = curLong - pinLong;
                    }

        </script>
          </HEAD>
          <BODY>
        <select Id="Position">
            <option value="HFS">Head First Supine</option>
            <option value="HFP">Head First Prone</option>
            <option value="FFS">Feet First Supine</option>
            <option value="FFP">Feet First Prone</option>
        </select><br><br>
        <div style="margin-bottom: 120px;">
        <style>
            label { float: left; width: 35px; }
            #column1{ float: left; position: relative; z-index: 0; width: 150px;}
            #column2{ float: left; position: relative; z-index: 2; width: 150px;}
            #column3{ float: left; position: relative; z-index: 1; width: 125px;}
            #button { position: absolute; }
        </style>
        <div id="column1">Current Position</br></br>
            <label for="Vert">Vert:</label>
            <input type="text" id="curVert" size="10" value="" /></br>
            <label for="Lat">Lat:</label>
            <input type="text" size="10" id="curLat" value="" /></br>
            <label for="Long">Long:</label>
            <input type="text" size="10" id="curLong" value="" />  
        </div>

        <div id="column2">Pinnicle Shifts<br><br>
            <label for="Vert">Vert:</label>
            <input type="text", id="pinVert" size="10" value="" /></br>
            <label for="Lat">Lat:</label>
            <input type="text", id="pinLat" size="10" value="" /></br>
            <label for="Long">Long:</label>
            <input type="text", id="pinLong" size="10" value="" />      
        </div>

        <div id="column3">Calculated Shifts</br></br>
            <label for="Vert">Vert:</label>
            <input type="text", id="gotoVert" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/></br>
            <label for="Lat">Lat:</label>
            <input type="text", id="gotoLat" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/></br>
            <label for="Long">Long:</label>
            <input type="text", id="gotoLong" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/>       
        </div><br />
        </div>

        <div id="button">
            <input type = "button" style="margin-top: 10px;" value="Calculate Shifts" onclick="tableShifts();" />
            <input type = "button" style="margin-top: 10px;" value="Reset" onclick=""/>
         </div> 
        </BODY>
        </HTML>