Почему мой JavaScript не работает в веб-форме ASP.net?

Question

У меня нет проблем с запуском кода в виде HTML-страницы. Теперь в веб-форме конвертер просто ничего не делает. Была попытка перенести его на страницу веб-формы из HTML для использования главной страницы и темы.

<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> 
// Code 
</script> 

Alternative, создать внешний скрипт 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"> 

будет работать