为什么我的 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

Webforms 保留<form> 标签，以便它可以管理回发并将信息取回。

首先，您不应该使用<form> 标签，您可以将它们松散地放在页面中。

要获取它们，您应该给它们id's 并使用 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

添加

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

会有用的

Answer 3

删除 type 和 lang 属性并仅使用：

<script>
// Code
</script>

另一种方法，创建一个外部 JS 脚本并用例如这个来实现它：

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