Permalänk
Medlem

Göra en miniräknare

Hejsan.
Har nydligen lekt runt lite i att göra en minräknare med hjälp av javascript, har dock kommit till lite små bekymmer som jag inte förstår hur jag ska lösa? (har knappt aldrig hållt på med detta innan utan bara läst igenom en heldel studiematerial)
1.Första bekymmret är då att min "+" metod inte adderar utan bara skriver nummerna i följd, medans alla dom andra fungerar? Antar ju att detta beror på att vid "+" så tolkas talen som "strängar" men förstår inte varför dom skulle göras de?.

2.Sen skulle jag ju även vilja att resultatet istället hamnade i min resultat ruta samt att den gav en röd text färg istället om svaret är <=0.
Har provat att skriva in följande då för att få det att fungera med den röda texten, och då lagt det under"function Calculate(){":
var negative=num1 + num2;
if (negative <= 0)
{document.getElementById("result1").style.color="red";;
}
else{
}
men fungerade inte alls, hur ska det skrivas för att det ska reagera på resultatet från num1+num2,samt då om det är <=0.
Sen för att få resultatet skrivet i input "res" istället för att det öppnas i en ny sida?

Har då skrivit följande kod totalt (utan frågan2):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>java</title>

</head>
<body>

<h3>Miniräknare Med JavaScript</h3>
<form name="form" id="calculator">
<fieldset style="width: 600px;">
<legend>Miniräknare</legend>
<!-- Inmatning num1 -->
Tal 1
<input name="num1" id="num1" type="text" size="5">
<!-- Formel val -->
<select name="math" id="math">
<option>formel</option>
<option id="plus" value="+">+</option>
<option id="minus" value="-">-</option>
<option id="times" value="*">*</option>
<option id="divided" value="/">/</option>
</select>
<!-- Inamatning num2 -->
Tal 2
<input name="num2" id="num2" type="text" size="5">
<!-- Knapp för beräkning -->
<input type="button" onclick="Calculate();" id="calculate" value="Beräkna"><br>
<!-- Resultat -->
<p id="result1">Resultat<p>
<input name="resultat" id="resultat" type="text" size="10">
</fieldset>
</form>
<!-- Javascripten -->
<script>
function Calculate()
{
var negative=result;
if (negative <= 0)
{document.getElementById("result1").style.color="red";;
}
else{
}
var num1 = document.getElementById("num1").value;

var num2 = document.getElementById("num2").value;
<!-- Validering av siffror -->
num1_parsed = parseInt(num1);

num2_parsed = parseInt(num2);

if (num1_parsed)
{
}
else
{
alert ("Vänligen ange enbart siffror");
return false;
}

if (num2_parsed)
{
}
else
{
alert ("Vänligen ange enbart siffror");
return false;
}
<!-- Uträkningsmetod -->
method = document.getElementById("math").value;
var result;
if (method == "+") {
result = num1 + num2;
} else if (method == "-") {
result = num1 - num2;
} else if (method == "*") {
result = num1 * num2;
} else if (method == "/") {
result = num1 / num2;
}
document.getElementById("res").write (result);
}
</script>
</body>
</html>

Tack i Förhand!

Permalänk

1. Använd num1_parsed och num2_parsed istället för num1 och num2.
2. Förstår inte vad du gör här:

var negative=result; if (negative <= 0) {document.getElementById("result1").style.color="red";; }

Du deklarerar result mycket längre ner. Du har har ingen text i "result1", color sätter färg på texten.

Permalänk
Medlem

löst det hela nu efter gått igenom några youtubeklipp =):
<!-- Funktion för resultat visning -->
function setResult(){
document.getElementById("resultat").value = result;
if (result <=0){
document.getElementById("result1").style.color="red";
}
else{
document.getElementById("result1").style.color="black";
}

Samt lagt till setResult (); under uträkningsmetoden.