Jump to content

Sum in Javascript and Count to 10

Tilke1955

By Tilke1955
in JavaScript

 Share

Recommended Posts

Tilke1955 Newbie

Tilke1955

Posted
Posted

Hello,

 

I am building a site to record results to a MySql database.

The visitors have to fill in 10 numbers between 1 and 10.

It can be the same numbers ex: 5,5,5,5,8,8,8,10,10,10 (total=74)

 

First: I need to block the input when there are exact 10 numbers.

I have no clue how to do that.

Two: The 10 numbers and the total must go to a database.

The output is everytime different and how can i give a unique naam to the output.

 

I hope that someone nows the answers to my problems.

My native language is not English and i hope i have it explained good.

 

 

 

 

What I have made so far :

 

<!DOCTYPE html>
<html>
<title>Series 1</title>
<body>
</script>
<p>Klick on number:</p>
<button onclick="myFunctionGetal10()">10</button>
<button onclick="myFunctionGetal9()"> 9</button>
<button onclick="myFunctionGetal8()"> 8</button>
<button onclick="myFunctionGetal7()"> 7</button>
<button onclick="myFunctionGetal6()"> 6</button>
<button onclick="myFunctionGetal5()"> 5</button>
<button onclick="myFunctionGetal4()"> 4</button>
<button onclick="myFunctionGetal3()"> 3</button>
<button onclick="myFunctionGetal2()"> 2</button>
<button onclick="myFunctionGetal1()"> 1</button>
<br>
<br>
<p>
Result:
<script>
function myFunctionGetal1() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "1");
document.body.appendChild(x);
}
function myFunctionGetal2() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "2");
document.body.appendChild(x);
}
function myFunctionGetal3() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "3");
document.body.appendChild(x);
}
function myFunctionGetal4() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "4");
document.body.appendChild(x);
}
function myFunctionGetal5() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "5");
document.body.appendChild(x);
}
function myFunctionGetal6() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "6");
document.body.appendChild(x);
}
function myFunctionGetal7() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "7");
document.body.appendChild(x);
}
function myFunctionGetal8() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "8");
document.body.appendChild(x);
}
function myFunctionGetal9() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "9");
document.body.appendChild(x);
}
function myFunctionGetal10() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "10");
document.body.appendChild(x);
}
</script>
</body>
</html>
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

The only thing the code does is create more buttons when you click a button, right?How about giving them 10 text boxes, and they can type the numbers into each box? Or, instead of having 10 functions which all pretty much do the same thing, how about 1 function that you pass the value to? e.g.:

function myFunctionGetal(num) {    var x = document.createElement("INPUT");    x.setAttribute("type", "button");    x.setAttribute("value", num);    document.body.appendChild(x);}
You could modify that function so that it stores all of the numbers in an array, and when you have 10 numbers in the array then you can do something else.
Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted

Thanks @justsomeguy :good:

 

This works fine.

I had to change all the html lines:

ex: <button onclick="myFunctionGetal10()">10</button>

to

ex: <button onclick="myFunctionGetal(10)">10</button>

 

and then it works perfectly.

 

I am going to try to modify the function into: store it as an array, as you suggested.

 

I will try it first by myself, and when i become desperate, i will come back to the forum. ;)

 

Tilke1955

Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted

Hi, now i am desperate.

 

The results by clicking on the button is a new button so the users can see what numbers they have used.

So far so good.

 

But now is the question: How do i modify the function to write it in a array.

And how can i link this 10 new buttons with my db columnames.( 101, 102,....110, total)

 

The result of the array must be something like this ?

var serieArray = new Array("5","5","5","5","8","8","8","10","10","10","Array_sum") showArray(serieArray);
This is to see for the users what they filled in and show them a total.
And when the user agreed i will make a "insert to button" to fill the database from the 'serieArray'.

Thanks

Tilke1955

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

You can use a global array variable to store your list of numbers. Each time that functions runs, it can check the length of the array and, if it is less than 10, add the new number to it. If the array already has 10 numbers then you can show a message or whatever else you want to do. You could use ajax to send the data to the server so that you can put it in the database, or write the array values to a hidden form input and then submit the form.

Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted

I am stucked again.

There are so many examples on the forums but they are all with a fixed item to add to an existing Array.

Never i find an example with an empty Array that i can fill with a result from a button.

 

I am sure i need some or all of the following items:

var serie = new Array(10);
serieArray = [ ];
function myFunctionGetal ( ) {
document.getElementById("name").innerHTML = serie;
system.out.println('q1','q2.....q10'); or array('index0', 'index1', ..., 'index10' )
Could you please give me a hint in the right direction?
Thanks
Tilke1955
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

You can add a new element with Array.push, e.g.: 

var ar = [];ar.push(1);ar.push(2);ar.push(3);alert(ar.join(","));
Don't use system.out.println. That is Java, not Javascript. The two aren't related. Here's the MDN reference:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted (edited)

I have found an other example that also sum radio buttons.

The only thing i now need to find, is to put under the totaal : a list from each value.

Does any one knows a working example for me.

The code i now have is this:

 

<html>
<body>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price.checked == true ){
val1 = document.form1.price.value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2.checked == true ){
val2 = document.form2.price2.value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3.checked == true ){
val3 = document.form3.price3.value;
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
Choose the first number:<br>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);">1
<br>
<input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);">2
<br>
</form>
Choose the second number:<br>
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="3" name="price2" onClick="DisplayPrice(this.value);">3
<br>
<input id="rdo_2" type="radio" value="4" name="price2" onClick="DisplayPrice(this.value);">4
<br>
</form>
Choose the third number:<br>
<form name="form3" id="form3" runat="server">
<br>
<input id="rdo_1" type="radio" value="5" name="price3" onClick="DisplayPrice(this.value);">5
<br>
<input id="rdo_2" type="radio" value="6" name="price3" onClick="DisplayPrice(this.value);">6
<br>
</form>
<br><br>
Total Result:
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly>
<br><br>
List of Each number: <p id="list1"><p id="list2"><p id="list3">
</body>
</html>
Edited by Tilke1955
Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted

So, why does this not work in my script?

 

<script type="text/javascript">
document.write(val1);
document.write(val2);
document.write(val3);
</script>
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Those variables are set inside the DisplayPrice function, so the code to print those variables should also be in that function after the variables have been set. You should not use document.write to show those though, you should use innerHTML like you're doing for the others.

Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted

Hi,

 

I have added in the the DisplayPrice function this:

{
var list1=parseInt(val1);
document.getElementById("list1").innerHTML=list1;
}
and in HTML this:
<input type="text" name="list1" id="list1" value="" size="2" readonly>
But no result....., what is wrong?
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

The innerHTML property refers to what's between the opening and closing tags of an element. The <input> element is an empty element, so there's no innerHTML for it. When you're working with <input> and <textarea> objects you have to use the value property.

Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted (edited)

Thanks @ justsomeguy and @ Foxy Mod

 

With your help and suggestions I have found this solution for the element:

 

function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price.checked == true ){
val1 = document.form1.price.value;
var list1=parseInt(val1);
document.getElementById("list1").innerHTML=list1;
And it did the job, now i can go on, putting the data in the MySql database with a query.
Tilke1955
Edited by Tilke1955
Link to comment
Share on other sites
  • 2 weeks later...
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted

Hi,

I am still trying to get the data in the database.

It does not work. When i use this:

 

$sql = "INSERT INTO database (columname1,columname2)
VALUES(id='list1' , id='list2')";
or this:
$sql = "INSERT INTO database (columname1,columname2)
VALUES(id='val1' , id='val2')";
The database returns only the number 1 and not the value of the pressed radio button.
The columns definitions are int(11)
I work with the data posted as at 12-3-2015
Has any one an idea what i do wrong ?
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

It seems you don't know how to retrieve data from forms in PHP. Here's a tutorial page about it: http://www.w3schools.com/php/php_forms.asp

 

In your SQL queries you're sending the literal string 'list1' and 'list2', the id= part will probably cause a MySQL error because of bad syntax.

Link to comment
Share on other sites
Tilke1955 Newbie

Tilke1955

Posted
  • Author
Posted

Hello,

 

If you mean that i should use this:

 

$sql = "INSERT INTO database (columname1,columname2)
VALUES ('$_POST [val1]' , '$_POST [val1]' )";
It gives the same result: only number 0
I have tried all the examples in the tutorials and none of them worked.
When i use this:
$sql = "INSERT INTO database(columname1,columname2) VALUES ('6', '$_POST[val2]')";
then the number 6 apeares in column 1 and number 0 in column 2
This proves that the connection is well and the column type is well.
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

It also proves that you're not sending data to the database correctly. You need to use prepared statements when you're using user-supplied data in a query, look up prepared statements and you won't have problems with sending the data to the database.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...