为什么我的JavaScript不能在ASP.net web表单中工作？

Question

作为一个HTML页面运行代码我没有问题。现在，在一个Web表单中，转换器根本不做任何事情。正尝试将其从HTML迁移到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> 

Answer 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代码，但如果你只想得到这个工作，这样你就可以继续学习它应该做的伎俩。

Answer 2

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

<script> 
// Code 
</script> 

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

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

Answer 3

添加

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

它会工作