2015-04-01 76 views
0

作为一个HTML页面运行代码我没有问题。现在,在一个Web表单中,转换器根本不做任何事情。正尝试将其从HTML迁移到Web表单页面以使用母版页和主题。为什么我的JavaScript不能在ASP.net web表单中工作?

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
<script lang="javascript" type="text/javascript"> 
    //Convert Logic 
    function CelsiusConvert() { 
     document.converter.fahrenheit.value = (document.converter.celsius.value * 9/5) + 32 
     document.converter.kelvin.value = document.converter.celsius.value * 1 + 273.15 
    } 
    function FahrenheitConvert() { 
     document.converter.celsius.value = (document.converter.fahrenheit.value - 32) * 5/9 
     document.converter.kelvin.value = ((document.converter.fahrenheit.value - 32) * 5/9) + 273.15 
    } 
    function KelvinConvert() { 
     document.converter.celsius.value = document.converter.kelvin.value - 273.15 
     document.converter.fahrenheit.value = ((document.converter.kelvin.value - 273.15) * 9/5) + 32 
    } 
</script> 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
    <form name="converter"> 
     <!--Input Fields--> 
     Celsius: 
     <input type="text" name="celsius" onchange="CelsiusConvert()"/><br /> 
     Fahrenheit: 
     <input type="text" name="fahrenheit" onchange="FahrenheitConvert()"/><br /> 
     Kelvin: 
     <input type="text" name="kelvin" onchange="KelvinConvert()"/><br /> 
     <!--Convert Button--> 
     <input type="button" value="Convert!" /> 
    </form> 
    </asp:Content> 
+1

请阅读“[我如何问一个好问题](http://stackoverflow.com/help/how-to-ask)”,然后改进你的问题。 – 2015-04-01 12:08:56

+1

尝试移除“表格”标记并检查 – BNN 2015-04-01 12:09:17

+2

您遇到的问题到底是什么? – Kritner 2015-04-01 12:09:23

回答

1

Web表单保留<form>标签,以便它可以管理的回传,并采取信息回。

对于你不应该使用<form>标签开始,你可以把他们在松动这一页。

要得到他们,你应该给他们id的和使用document.getElementById访问他们(或使用jQuery)。

顺便说一句,我不认为访问表单的方法是跨浏览器兼容,但无论如何,这与WebForms无关,因为无论如何您都要将其移除。

因此,像这样:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
<script lang="javascript" type="text/javascript"> 
    //Convert Logic 
    function CelsiusConvert() { 
     document.getElementById("fahrenheit").value = (document.getElementById("celsius").value * 9/5) + 32 
     document.getElementById("kelvin").value = document.getElementById("celsius").value * 1 + 273.15 
    } 
    function FahrenheitConvert() { 
     document.getElementById("celsius").value = (document.getElementById("fahrenheit").value - 32) * 5/9 
     document.getElementById("kelvin").value = ((document.getElementById("fahrenheit").value - 32) * 5/9) + 273.15 
    } 
    function KelvinConvert() { 
     document.getElementById("celsius").value = document.getElementById("kelvin").value - 273.15 
     document.getElementById("fahrenheit").value = ((document.getElementById("kelvin").value - 273.15) * 9/5) + 32 
    } 
</script> 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
    <div> 
     <!--Input Fields--> 
     Celsius: 
     <input type="text" name="celsius" id="celsius" onchange="CelsiusConvert()"/><br /> 
     Fahrenheit: 
     <input type="text" name="fahrenheit" id="fahrenheit" onchange="FahrenheitConvert()"/><br /> 
     Kelvin: 
     <input type="text" name="kelvin" id="kelvin" onchange="KelvinConvert()"/><br /> 
     <!--Convert Button--> 
     <input type="button" value="Convert!" /> 
    </div> 
    </asp:Content> 

我并不是说这是伟大的JavaScript代码,但如果你只想得到这个工作,这样你就可以继续学习它应该做的伎俩。

-1

删除类型和lang属性和只使用:

<script> 
// Code 
</script> 

替代,创建一个外部JS脚本,并与例如此实现它:

<script type="text/javascript" src="/js/custom.js"></script> 
+0

它也可以使用'type'和'lang' atttibute,OP代码中的主要问题是表单标记,这就是为什么javascript代码不工作 – BNN 2015-04-01 12:27:36

0

添加

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 

它会工作

相关问题