2017-02-27 1 views
0

Ich habe einen Rechner erstellt. Jetzt möchte ich hinzufügen, was Operation wie Addition und Multiplikation tun kann.mit einzelnen Eingabetextfeld wie Funktionen wie Addidtion und Subtraktion erstellen und Ergebnis anzeigen?

Ich bin neu in Javascript bitte kann mich jeder hep hauen. Ich habe meinen Code hier zur Verfügung gestellt, ich versuche es mit Event-Handler. Ich möchte es so einfach wie möglich machen. Bitte helfen Sie mir, danke.

Ich versuche das von Woche bitte helfen Sie mit richtigen Beispielen. Vielen Dank im Voraus. Wenn es möglich ist dann bitte geben Sie mir ein Beispiel. Einfach möchte ich zwei Funktionen erstellen, die Operationen der Multiplikation und Addition mit Event-Handlern tun können, aber nicht mit den beiden Textfeld mein Taschenrechner enthalten ein Textfeld so nur mit einem und zeigt in demselben Textfeld.

Siehe Code:

/*var temp; 
 
    function onload() { 
 
     temp = document.getElementById('new'); 
 
    } 
 
    function ce(){ 
 
     var tempo = temp.slice(0, -1); 
 
     document.getElementById("new").innerHTML = tempo; 
 
    } 
 
*/ 
 

 
/*$(document).ready(function() 
 
{ 
 
     var temp = $('#new'); 
 
     var ce = $('#ce'); 
 
     ce.click(function() { 
 
      alert(temp.val()); 
 
     }); 
 
    }); */ 
 

 
//var input1=0; 
 
//var input2=0; 
 
// textInputVal= parseInt(document.getElementById('new').value); 
 

 

 

 
function one() { 
 
    document.getElementById('new').value += 1; 
 
} 
 

 
function two() { 
 
    document.getElementById('new').value += 2; 
 
} 
 

 
function three() { 
 
    document.getElementById('new').value += 3; 
 
} 
 

 
function four() { 
 
    document.getElementById('new').value += 4; 
 
} 
 

 
function five() { 
 
    document.getElementById('new').value += 5; 
 
} 
 

 
function six() { 
 
    document.getElementById('new').value += 6; 
 
} 
 

 
function seven() { 
 
    document.getElementById('new').value += 7; 
 
} 
 

 
function eight() { 
 
    document.getElementById('new').value += 8; 
 
} 
 

 
function nine() { 
 
    document.getElementById('new').value += 9; 
 
} 
 

 
function zero() { 
 
    document.getElementById('new').value += 0; 
 
} 
 

 
function actionevent() { 
 
    var btn = document.getElementById("plu"); 
 
    onclick.btn = function() { 
 
    textInputVal = 
 
    } 
 

 
} 
 

 
function ce() { 
 
    var textInputVal = 0, 
 
    temp = 0; 
 
    textInputVal = document.getElementById('new').value; 
 
    //console.log(textInputVal); 
 
    temp = textInputVal.slice(0, -1); 
 
    //console.log(temp); 
 
    document.getElementById('new').value = temp; 
 
} 
 
var demo = 0; 
 

 
function mplus() { 
 
    var textInputVal = 0; 
 
    textInputVal = parseInt(document.getElementById('new').value); 
 
    console.log(textInputVal); 
 
    demo += textInputVal; 
 
    console.log(demo); 
 

 
} 
 
var temp = 0; 
 

 

 
//var textInputval; 
 
function plus() { 
 

 
    //var textInputval=0; 
 
    //var textInputval1=0; 
 

 
    var textInputval = parseInt(document.getElementById('new').value); 
 
    console.log(textInputval); 
 
    return textInputval; 
 

 
    //document.getElementById("new").value=" "; 
 
    //var temp = parseInt(document.getElementById('new').value); 
 
    //textInputval1 = parseInt(document.getElementById('new').value); 
 
    //temp = textInputval + textInputval1; 
 
    //console.log(temp); 
 
    //textInputval = $(this).val(); 
 
    //$(this).val(''); 
 
    //console.log(textInputval1); 
 
} 
 

 
function mminus() { 
 
    var textInputVal = 0; 
 
    textInputVal = parseInt(document.getElementById('new').value); 
 
    console.log(textInputVal); 
 
    demo -= textInputVal; 
 
    console.log(demo); 
 
} 
 

 
function mr() { 
 
    document.getElementById('new').value = demo; 
 
} 
 

 

 
/* $(document).ready (function(){ 
 

 
$("#clear_li").click(function(){ 
 
    $("li:last").remove(); 
 
}); 
 

 
}); */ 
 
//var inputval=innerHTML - substring; 
 
//var inputval=input.innerHTML; 
 
//var sillyString = inputval.slice(0, -1);
<body> 
 
    <div id="cal-container"> 
 
    <form name="calculator"> 
 
     <input type="text" name="answer" value="" id="new"> 
 
     <br> 
 
     <input type="button" value=" 1 " onclick="one()" /> 
 
     <input type="button" value=" 2 " onclick="two()" /> 
 
     <input type="button" value=" 3 " onclick="three()" /> 
 
     <input type="button" id="plu" value=" + " onclick="plus()" /> 
 
     <br> 
 
     <input type="button" value=" 4 " onclick="four()" /> 
 
     <input type="button" value=" 5 " onclick="five()" /> 
 
     <input type="button" value=" 6 " onclick="six()" /> 
 
     <input type="button" value=" - " onclick="minus()" /> 
 
     <br> 
 
     <input type="button" value=" 7 " onclick="seven()" /> 
 
     <input type="button" value=" 8 " onclick="eight()" /> 
 
     <input type="button" value=" 9 " onclick="nine()" /> 
 
     <input type="button" value=" * " onclick="multi()" /> 
 
     <br> 
 
     <input type="button" value=" c " onclick="calculator.answer.value = ''" /> 
 
     <input type="button" value=" 0 " onclick="zero()" /> 
 
     <input type="button" value=" = " onclick="equal()" /> 
 
     <input type="button" value="/" onclick="div()" /> 
 
     <br> 
 
     <input type="button" value="CE" onclick="ce()" /> 
 
     <input type="button" value="M+" onclick="mplus()" /> 
 
     <input type="button" value="M-" onclick="mminus()" /> 
 
     <input type="button" value="mr" onclick="mr()" /> 
 
    </form> 
 
    </div> 
 
</body>

+0

mein Code Link: - https://jsfiddle.net/archan/usLhu9aa/ – Arch

+0

Überprüfen Sie diese http://www.siteforinfotech.com/2015/02/how-to-create-simple-calculator-using.html –

+0

Kumpel ich habe das schon ausprobiert jetzt will ich das nicht nochmal benutzen. Ich möchte dies mithilfe von Event-Handlern oder durch Aufruf von onclick = "fun()" machen, also wie ich das mache? – Arch

Antwort

0

Es gibt nur wenige Fehler im Code waren änderte ich them.I haben nur für Addition, Subtraktion, Multiplikation und division.Rest von ihnen erstellt Sie folgen können, genauso wie ich es getan habe und das Ergebnis bekommen habe.

FIDDLE

Hier ist der Code.

var one = function() { 
 
    document.getElementById('new').value += 1; 
 
} 
 
var two = function() { 
 
    document.getElementById('new').value += 2; 
 
} 
 
var three = function() { 
 
    document.getElementById('new').value += 3; 
 
} 
 
var four = function() { 
 
    document.getElementById('new').value += 4; 
 
} 
 
var five = function() { 
 
    document.getElementById('new').value += 5; 
 
} 
 
var six = function() { 
 
    document.getElementById('new').value += 6; 
 
} 
 
var seven = function() { 
 
    document.getElementById('new').value += 7; 
 
} 
 
var one = function() { 
 
    document.getElementById('new').value += 1; 
 
} 
 
var two = function() { 
 
    document.getElementById('new').value += 2; 
 
} 
 
var three = function() { 
 
    document.getElementById('new').value += 3; 
 
} 
 
var four = function() { 
 
    document.getElementById('new').value += 4; 
 
} 
 
var five = function() { 
 
    document.getElementById('new').value += 5; 
 
} 
 
var six = function() { 
 
    document.getElementById('new').value += 6; 
 
} 
 
var seven = function() { 
 
    document.getElementById('new').value += 7; 
 
} 
 
var eight = function() { 
 
    document.getElementById('new').value += 8; 
 
} 
 
var nine = function() { 
 
    document.getElementById('new').value += 9; 
 
} 
 
var zero = function() { 
 
    document.getElementById('new').value += 0; 
 
} 
 
var plus = function() { 
 
    document.getElementById('new').value += "+"; 
 
} 
 
var minus = function() { 
 
    document.getElementById('new').value += "-"; 
 
} 
 
var multi = function() { 
 
    document.getElementById('new').value += "*"; 
 
} 
 
var div = function() { 
 
    document.getElementById('new').value += "/"; 
 
} 
 
var equal = function() { 
 
    document.getElementById('new').value = eval(document.getElementById('new').value); 
 
}
<body> 
 
    <div id="cal-container"> 
 
    <form name="calculator"> 
 
     <input type="text" name="answer" value="" id="new"> 
 
     <br> 
 
     <input type="button" value=" 1 " onclick="one()" /> 
 
     <input type="button" value=" 2 " onclick="two()" /> 
 
     <input type="button" value=" 3 " onclick="three()" /> 
 
     <input type="button" id="plu" value=" + " onclick="plus()" /> 
 
     <br> 
 
     <input type="button" value=" 4 " onclick="four()" /> 
 
     <input type="button" value=" 5 " onclick="five()" /> 
 
     <input type="button" value=" 6 " onclick="six()" /> 
 
     <input type="button" value=" - " onclick="minus()" /> 
 
     <br> 
 
     <input type="button" value=" 7 " onclick="seven()" /> 
 
     <input type="button" value=" 8 " onclick="eight()" /> 
 
     <input type="button" value=" 9 " onclick="nine()" /> 
 
     <input type="button" value=" * " onclick="multi()" /> 
 
     <br> 
 
     <input type="button" value=" c " onclick="calculator.answer.value = ''" /> 
 
     <input type="button" value=" 0 " onclick="zero()" /> 
 
     <input type="button" value=" = " onclick="equal()" /> 
 
     <input type="button" value="/" onclick="div()" /> 
 

 

 
    </form> 
 
    </div> 
 
</body>

Ich bin nicht sicher, warum Sie für eventListeners suchen sind jedoch, wenn Sie mit dieser Methode tun wollen, dann in HTML haben Sie ID zu jedem button zuweisen und onClick Ereignis entfernen.

<input type="button" value=" 1 id="one" /> 

Und in JavaScript Sie haben zu schreiben, wie für jede button id

document.getElementById("one").addEventListener("click", one_func); 

var one_func= function() { 
document.getElementById('new').value += 1; 
} 

folgt Wie Sie dieser Code mehr sehen ist dann der vorherige und ist keine gute practice.So ich Ihnen empfehlen, indem zu tun die Methode, die ich vorher gemacht habe.

+0

Danke Shubham, aber das ist das selbe, das ich vorher benutzt habe, nur das ist in Funktion. Bitte kann mir jemand zeigen, wie kann ich das tun, indem ich Ereignishandler benutze, brauche ich wirklich Hilfe Leute? – Arch

+0

Dieser Code wird mit onClick-Ereignis geschrieben.Was brauchst du noch? Versuchen Sie genauer zu sein.Suchen Sie nach onclick = "one (this.value);". Wenn die obige Antwort hilfreich ist, dann können Sie zumindest upvote. –

Verwandte Themen