どのように私のJavaScriptフォームのリセットボタンの作業を行うことができますか？

私のバリューインプット、計算グレード、およびgetElementById（ "an"）、getElementById（ "and"）をリセットします。私はさまざまな方法を試してきましたが、何も動作していないようです。フォームメソッドを使ってみましたが、コードがクラッシュするようです。どのように私のJavaScriptフォームのリセットボタンの作業を行うことができますか？

助けてください！

私は（すべてがリセットボタン以外の作品）は、次のコードを持っている：

document.getElementById("button").onclick = function() { 
 
    var a = document.getElementById("1").value * 0.4; 
 
    var b = document.getElementById("2").value * 0.4; 
 
    var c = document.getElementById("3").value * 0.2; 
 
    var grade = a + b + c; 
 
    document.getElementById("ans").innerHTML = grade; 
 
    if (grade < 70) { 
 
    document.getElementById("and").innerHTML = "bad" 
 
    } else if (grade >= 70) { 
 
    document.getElementById("an").innerHTML = "good" 
 
    } 
 

 
    document.div[1].addEventListener('reset', function() { 
 
    document.getElementById('and', 'an', 'ans').innerHTML = ''; 
 
    }); 
 
}

.legend { 
 
    position: relative; 
 
    width: 100%; 
 
    display: block; 
 
    padding: 20px; 
 
    border-radius: 20px; 
 
    background: #FFFF50; 
 
    padding: 15px; 
 
    color: black; 
 
    font-size: 20px; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
.wrapper { 
 
    border: 1px dashed #95a5a6; 
 
    height: 56px; 
 
    margin-top: 16px; 
 
    border-radius: 4px; 
 
    position: relative; 
 
    font-size: 20px; 
 
} 
 

 
.wrapper p { 
 
    line-height: 31px; 
 
}

<div id="thing"> 
 

 
    <legend class="legend">Average/Mean Calculator</legend> 
 
    <div id="myForm"> 
 
    <p> 
 
     What's Your First Grade?<input type="text" id="1" placeholder="Input 1st #"><br> What About Your Second Grade? <input type="text" id="2" placeholder="Input 2st #"><br> And Third? <input type="text" id="3" placeholder="Almost there 3rd #"> 
 
    </p> 
 
    <button id="button">Calculate</button> 
 
    <button onclick="myFunction()">Reset</button> 
 
    </div> 
 
    <p> 
 
    Calculated Grade: <span id="ans" style="color: green;"></span> 
 
    </p> 
 

 
    <div class="wrapper"> 
 
    <p> <span id="an" style="color: green;"></span> <span id="and" style="color: red;"></span></p> 
 
    </div> 
 
</div>

出典

2017-09-30 Kay

あなたは 'ドキュメントを必要といけません。 getElementById（ "button"）。onclick = function（）{'関数myFunction（）{}'を定義し、そこでフィールドをリセットします。 – derloopkat

はあなたmyFunctionを定義します。

function myFunction(){ 
    document.getElementById('and','an','ans').innerHTML = ''; 
}

ではなく、追加の機能として計算を追加します。 onclickページの各ボタンへのイベントリスナー。

<button id="button" onclick="calculate()">Calculate</button>

getElementById()のみは一度つの名前をサポートし、単一のノードではないノードの配列を返します。

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <style> 
 
    .legend { 
 
     position: relative; 
 
     width: 100%; 
 
     display: block; 
 
     padding: 20px; 
 
     border-radius: 20px; 
 
     background: #FFFF50; 
 
     padding: 15px; 
 
     color: black; 
 
     font-size: 20px; 
 
     font-family: 'Open Sans', sans-serif; 
 
    } 
 
    
 
    .wrapper { 
 
     border: 1px dashed #95a5a6; 
 
     height: 56px; 
 
     margin-top: 16px; 
 
     border-radius: 4px; 
 
     position: relative; 
 
     font-size: 20px; 
 
    } 
 
    
 
    .wrapper p { 
 
     line-height: 31px; 
 
    } 
 
    </style> 
 

 
    <div id="thing"> 
 

 
    <legend class="legend">Average/Mean Calculator</legend> 
 
    <div id="myForm"> 
 
     <p> 
 
     What's Your First Grade?<input type="text" id="1" placeholder="Input 1st #"><br> What About Your Second Grade? <input type="text" id="2" placeholder="Input 2st #"><br> And Third? <input type="text" id="3" placeholder="Almost there 3rd #"> 
 
     </p> 
 
     <button id="button" onclick="calculate()">Calculate</button> 
 
     <button onclick="myFunction()">Reset</button> 
 
    </div> 
 
    <p> 
 

 
     Calculated Grade: <span id="ans" style="color: green;"></span> 
 

 
    </p> 
 

 
    <div class="wrapper"> 
 

 
     <p> <span id="an" style="color: green;"></span> <span id="and" style="color: red;"></span></p> 
 
    </div> 
 

 

 
    </div> 
 
    <script> 
 
    function calculate() { 
 
     var a = document.getElementById("1").value * 0.4; 
 
     var b = document.getElementById("2").value * 0.4; 
 
     var c = document.getElementById("3").value * 0.2; 
 
     var grade = a + b + c; 
 
     document.getElementById("ans").innerHTML = grade; 
 
     if (grade < 70) { 
 
     document.getElementById("and").innerHTML = "bad" 
 
     } else if (grade >= 70) { 
 
     document.getElementById("an").innerHTML = "good" 
 
     } 
 
    } 
 

 
    function myFunction() { 
 
     document.getElementById('and').innerHTML = ''; 
 
     document.getElementById("ans").innerHTML = ''; 
 
     document.getElementById("an").innerHTML = ''; 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

出典

2017-09-30 20:03:36 bhansa

私はそれが動作する可能性を願って、この機能を試してみてください。

 function myFunction(){ 
     document.getElementById("1").value=0; 
     document.getElementById("2").value=0; 
     document.getElementById("3").value=0; 
    document.getElementById('ans').innerHTML = "0"; 
    document.getElementById('and').innerHTML = ''; 
    document.getElementById('an').innerHTML = ''; 
     }

出典

2017-09-30 20:13:08

私は、あなたが次のようにJavaScriptでフォームのリセットを使用することができ、たとえば

<div id="thing"> 
    <legend class="legend">Average/Mean Calculator</legend> 
    <form id="myForm"> 
     <p> 
      What's Your First Grade? 
      <input type="text" id="1" placeholder="Input 1st #" /> 
      <br/> What About Your Second Grade? 
      <input type="text" id="2" placeholder="Input 2st #" /> 
      <br/> And Third? 
      <input type="text" id="3" placeholder="Almost there 3rd #" /> 
     </p> 
     <button id="button">Calculate</button> 
     <button onclick="myFunction()">Reset</button> 
    </form> 
    <div class="answer"> 
     <p>Calculated Grade: 
      <span id="ans" style="color: green;"></span> 
     </p> 
     <div class="wrapper"> 
      <p> 
       <span id="an" style="color: green;"></span> 
       <span id="and" style="color: red;"></span> 
      </p> 
     </div> 
    </div> 
</div>

をフォームを持っているあなたのHTMLを変更することをお勧め：

function calculate() { 
    document.getElementById('myForm').reset(); 
}

出典

2017-10-01 13:54:07 Tapas

どのように私のJavaScriptフォームのリセットボタンの作業を行うことができますか？

答えて

関連する問題