मैं NaN को कैसे कार्यान्वित करूं और एक में अमान्य इनपुट डिस्प्ले हो

ऐसा करने के लिए मुझे यह सत्यापित करने के लिए isNaN का उपयोग करना होगा कि संख्यात्मक मान इनपुट हैं। मैं चाहता हूं कि यह "अमान्य इनपुट" प्रदर्शित करे जब भी दो पहले टेक्स्ट बॉक्स में से किसी एक में एक गैर संख्यात्मक मान डाला जाता है।

http://jsfiddle.net/hq3m1uns/1/ यह मेरा बेला लिंक है

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Question2</title>
        <style> 
        
        </style>

        <script type="text/javascript">

    

window.onload = function(){
    
};


 function add_number(){



var first_number = document.querySelector("#tb1").value;
  var second_number = document.querySelector("#tb2").value;
  var First = parseInt(first_number);
  var Second = parseInt(second_number);
  var result = First + Second;
  document.getElementById('tb3').setAttribute("value",result);
}



        </script>


    </head>
    <body>        
        <div>
  <h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input style="width: 50%" type="text" id="tb3" name="TextBox3" >
<br>
<input onclick="add_number()" type="button" id="b1" value="GO" />


</body>
</html>
-2
James Mallen 19 फरवरी 2021, 17:29

2 जवाब

सबसे बढ़िया उत्तर

बस अपनी HTML फ़ाइल में "msg" आईडी के साथ एक पैराग्राफ टैग जोड़ें और अपने जावास्क्रिप्ट कोड में निम्नलिखित परिवर्तन करें।

function add_number() {
  var first_number = document.querySelector("#tb1").value;
  var second_number = document.querySelector("#tb2").value;
  
  if (isNaN(first_number) || isNaN(second_number)) {
    document.getElementById('msg').innerHTML = "Invalid Input";
  } else {
    document.getElementById('msg').innerHTML = "";
    var First = parseInt(first_number);
    var Second = parseInt(second_number);
    var result = First + Second;
    document.getElementById('tb3').setAttribute("value", result);
  }
}
<p id="msg"></p>
0
Roshan Kumar 19 फरवरी 2021, 17:54

संख्यात्मक मान को मान्य करने के लिए इनपुट फ़ील्ड पर keyup ईवेंट श्रोता का उपयोग करने का एक तरीका है और इसकी वैधता के आधार पर पैराग्राफ तत्व के textContent को अपडेट करना है।

एक अन्य उपाय यह है कि इनपुट के लिए input type="number" का उपयोग किया जाए और उस पर HTML5 के checkValidity/reportValidity का उपयोग किया जाए, लेकिन मैं इसे आपके लिए शोध करने और अपने बारे में जानने के लिए छोड़ दूंगा।

function validate(inputId, helpId) {
  var value = document.getElementById(inputId).value;
  var help = document.getElementById(helpId);
  if (isNaN(value))
    help.textContent = "invalid input"
  else
    help.textContent = ""
}
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1" onkeyup="validate('tb1', 'help1')">
<p id="help1"></p>
0
Jeff Jenkins 19 फरवरी 2021, 17:38