為什么我的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並使用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>