Добавление четкой кнопки с HTML и JavaScript

Я не могу понять, почему это не сработает! Моя кнопка очистки ничего. Вот моя вся форма/калькулятор. Мне нужна кнопка «clear», чтобы избавиться от текста в полях «feet» и «meters».Добавление четкой кнопки с HTML и JavaScript

Я работаю над проектом класса.

<body> 
<form name="myForm"> 

<table border = "0" width = 300px> 
<tr> 
    <td> 
    Feet: 
    </td> 
    <td> 
    <input type="text" id="feet"> 
    </td> 
</tr> 
<tr> 
    <td> 
    Meters: 
    </td> 
    <td> 
    <input type="text" id="meters"> 
</tr> 
</table> 
</form> 
</body> 

<p> 
<button onClick="calculate()">Convert</button> 
<button onClick="clear()">Clear</button> 
<p> 

<script> 

function calculate() 
{ 
    var feet = document.getElementById("feet").value; 
    var meters = document.getElementById("meters").value; 
    var final; 

    if (feet == "" && meters == "") 
    { 
    alert("Try Again"); 
    return; 
    } 
    else if (!(feet == "") && !(meters == "")) 
    { 
    alert("Try Again"); 
    return; 
    } 
    else if (feet == "") 
    { 
    final = (meters*(3.28084)); 
    //Display! 
    final = final.toFixed(2); 
    document.getElementById("feet").value = final; 

    } 
    else if (meters == "") 
    { 
    final = (feet*(.3048)); 
    //Display! 
    final = final.toFixed(2); 
    document.getElementById("meters").value = final; 
    } 
} 

//**************************************************************** 
function clear() 
{ 
    document.getElementById("myForm").reset(); 
} 

</script>

источник

2013-12-11 user3093353

Вы имеете вещи за пределами вашего – scrblnrd3

Почему вы не только с помощью кнопки сброса? '' И почему вы не используете кнопку отправки? – Popnoodles

Другими словами, у вас кровоточащие абзацы и кнопки – scrblnrd3

<button type="reset" value="Reset">

Почему вы должны использовать JS для выполнения этих за пределы JS, прикрепленных к «кнопке» ясной? Я бы придерживался HTML и просто использовал простой сброс формы.

Или попробуйте это здесь: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset

источник

2013-12-12 00:01:48

Пожалуйста, не связывайтесь с w3schools! http://www.w3fools.com/ – Popnoodles

Точка взята, просто пыталась подчеркнуть простоту формы ясно. –

Реальная проблема заключается в том, что вы используете этот

document.getElementById("myForm").reset();

но ваша форма не имеет ID, так что вы бы добавить ID

<form name="myForm" id="myForm">

Working demo

Это будет работать для вас, но если вы хотите исправить ваш код, читайте дальше.

У вас есть несколько ошибок. Ваша форма нуждается в идентификаторе, потому что вы используете getElementById
Нет необходимости использовать кнопку для отправки javascript, который делает то, что может сделать кнопка.
У вас есть </body>, затем больше HTML.
Там в отсутствии </td>
<table border = "0" width = 300px> не правильный синтаксис (и вы должны действительно использовать атрибут стиля или файл CSS)

Также вы можете использовать кнопку отправки и привязать функцию к действию вида бытия представленный мной, который я сделал здесь.

<body> 
<form name="myForm" id="myForm"> 
    <table border = "0" width = "300"> 
     <tr> 
      <td>Feet:</td> 
      <td><input type="text" id="feet"></td></tr> 
     <tr> 
      <td>Meters:</td> 
      <td><input type="text" id="meters"></td> 
     </tr> 
    </table> 
    <button type="submit">Convert</button> 
    <button type="reset">Clear</button> 
</form> 

<script> 

document.getElementById("myForm").onsubmit=function(){ 
    calculate(); 
    return false; 
}; 

function calculate() 
{ 
    var feet = document.getElementById("feet").value; 
    var meters = document.getElementById("meters").value; 
    var final; 

    if (feet == "" && meters == "") 
    { 
    alert("Try Again"); 
    return; 
    } 
    else if (!(feet == "") && !(meters == "")) 
    { 
    alert("Try Again"); 
    return; 
    } 
    else if (feet == "") 
    { 
    final = (meters*(3.28084)); 
    //Display! 
    final = final.toFixed(2); 
    document.getElementById("feet").value = final; 

    } 
    else if (meters == "") 
    { 
    final = (feet*(.3048)); 
    //Display! 
    final = final.toFixed(2); 
    document.getElementById("meters").value = final; 
    } 
} 

</script> 
</body>

источник

2013-12-12 00:06:39 Popnoodles

Закрытие тегов TD необязательно, хотя это, кажется, было опущено из HTML5. – RobG

@RobG хорошая точка, но OP использовал их иногда, а иногда и нет, поэтому предполагает, что они отсутствуют – Popnoodles

<form name="myForm"> Изменение к <form name="myForm" id="myForm">, поскольку вы ищете для элемента с идентификатором myForm

источник

2013-12-12 00:15:27 frieder

Добавление четкой кнопки с HTML и JavaScript

ответ

Смежные вопросы