इसलिए, जैसा कि आप मेरे कोड में देख सकते हैं कि मैं जिस भी बटन पर क्लिक करता हूं वह कंसोल पर आउटपुट हो जाता है। मैं इसे इनपुट प्रकार = "टेक्स्टफील्ड" में प्रदर्शित करना चाहता हूं, मुझे शायद कुछ तर्क याद आते हैं जहां मैं एक दूसरे के साथ दो संख्याओं की गणना भी कर सकता हूं। ध्यान रखें कि मैं जावास्क्रिप्ट के लिए नया हूं, और यह मेरी पहली परियोजना है।

मुझे टेक्स्टफील्ड में योग प्रदर्शित करने की आवश्यकता है।

const buttons = document.querySelectorAll("input[type=button]");
const length = buttons.length;
for (let i = 0; i < length; i++) {
  buttons[i].addEventListener("click", handle);
}

function handle(event) {
  const value = event.target.value;
  switch (value) {
    case "+":
      console.log("+ was clicked");
      break;
    case "-":
      console.log("- was clicked");
      break;
    case "*":
      console.log("+ was clicked");
      break;
    case "/":
      console.log("/ was clicked");
      break;
    default:
      //console.log("%s was clicked", value);
      var myInput = document.getElementById("equal");
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Dizzy Calculator</title>
</head>

<body bgcolor="#b3b3cc" text="white">
  <form name="calculator">
    <h1>Calculator</h1>
    <div class="num">
      <tr>
        <td>
          <input type="button" value="1">
          <input type="button" value="2">
          <input type="button" value="3">
          <input type="button" value="+">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="4">
          <input type="button" value="5">
          <input type="button" value="6">
          <input type="button" value="-">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="7">
          <input type="button" value="8">
          <input type="button" value="9">
          <input type="button" value="*">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="/">
          <input type="button" value="0">
          <input type="reset" value="Reset">
        </td>
      </tr>
      <br>
      <input type="button" value="=" id="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
      <br>Solution is <input type="textfield" name="ans" value="">
    </div>
  </form>
</body>

</html>
2
Zagros 17 सितंबर 2019, 16:45

2 जवाब

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

सबसे पहले मैं आपके टेक्स्टफील्ड में एक आईडी जोड़ूंगा।

<input id="textfield" type="text" name="ans" value="">

फिर टेक्स्टफील्ड में आपके द्वारा क्लिक की गई संख्याओं को जोड़ने के लिए कुछ कोड जोड़ें।

default:
  //console.log("%s was clicked", value);
  var myInput = document.getElementById("equal");

  // add value of button to textfield
  document.getElementById("textfield").value += value;

गणित को संभालने के लिए आपको कोड भी जोड़ना होगा। उपरोक्त कोड का उपयोग करने का प्रयास करें, और यदि आप अटक जाते हैं तो पोस्ट करें।

2
Emil 17 सितंबर 2019, 14:10

आप इसे इस तरह कर सकते हैं। अपना कोड मेरे साथ बदलें।

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
   <title>Dizzy Calculator</title>
</head>
<body bgcolor="#b3b3cc" text="white">
   <form name="calculator">
   <h1>Calculator</h1>
   <div class="num">
       <tr>
           <td>
               <input type="button" id="1" value="1">
               <input type="button" id="2" value="2">
               <input type="button" id="3" value="3">
               <input type="button" id="plus" value="+">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="4" value="4">
               <input type="button" id="5" value="5">
               <input type="button" id="6" value="6">
               <input type="button" id="minus" value="-">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="7" value="7">
               <input type="button" id="8" value="8">
               <input type="button" id="9" value="9">
               <input type="button" id="mult" value="*">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="divide" value="/">
               <input type="button" id="0" value="0">
               <input type="reset" value="Reset">
           </td>
       </tr>
   <br>
       <input type="button" value="=" id="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
     <br>Solution is <input type="textfield" name="ans" value="" id="ans">
   </div>
   </form>
   <script>
       const buttons = document.querySelectorAll("input[type=button]");
       const length = buttons.length;
       for (let i = 0; i < length; i++)
           {
               buttons[i].addEventListener("click", handle);
           }
       function handle(event)
       {
           const value = event.target.value;
           switch(value)
           {
               case "+":
                   console.log("+ was clicked");
                   break;
               case "-":
                   console.log("- was clicked");
                   break;
               case "*":
                   console.log("+ was clicked");
                   break;
               case "/":
                   console.log("/ was clicked");
                   break;
               default:
               //console.log("%s was clicked", value);
               var myInput = document.getElementById("equal");
           }
       }
       $('#1').click(function(){
           $("#ans").val($('#ans').val() + 1);
       });
$('#2').click(function(){
 $("#ans").val($('#ans').val() + 2);
});
$('#3').click(function(){
 $("#ans").val($('#ans').val() + 3);
});
$('#4').click(function(){
 $("#ans").val($('#ans').val() + 4);
});
$('#5').click(function(){
 $("#ans").val($('#ans').val() + 5);
});
$('#6').click(function(){
 $("#ans").val($('#ans').val() + 6);
});
$('#7').click(function(){
 $("#ans").val($('#ans').val() + 7);
});
$('#8').click(function(){
 $("#ans").val($('#ans').val() + 8);
});
$('#9').click(function(){
 $("#ans").val($('#ans').val() + 9);
});
$('#0').click(function(){
 $("#ans").val($('#ans').val() + 0);
});
$('#plus').click(function(){
 $("#ans").val($('#ans').val() + "+");
});
$('#minus').click(function(){
 $("#ans").val($('#ans').val() + "-");
});
$('#divide').click(function(){
 $("#ans").val($('#ans').val() + "/");
});
$('#mult').click(function(){
 $("#ans").val($('#ans').val() + "*");
});
   </script>
</body>
-1
Foram Trada 17 सितंबर 2019, 14:09