Gå til innhold

Hjelp til summering av variabler og til å publisere det på websiden

prosjeik

Av prosjeik
i Programmering og webutvikling

Anbefalte innlegg

prosjeik

prosjeik

Skrevet
Skrevet

Hei.

Jeg trenger hjelp til å summere variablene i koden under og til å publisere summen på websiden.

 

Som dere ser så har jeg prøvd å gjøre det slik:

 

function alterText(){
document.getElementById('kommunikasjon').innerHTML = empDesignation();
}
function empDesignation(){
var output = txtCnt1 + txtCnt2 + txtCnt3 + txtCnt4 + txtCnt5 + txtCnt6 + txtCnt7 + txtCnt8 + txtCnt9;
return output
}

 

for deretter å publisere det slik:

 

<div id="kommunikasjon"></div>

men det fungerte ikke...

 

 

Litt om websiden: Jeg skal kunne trykke så mange ganger som jeg vil på hver av knappene, og så ender jeg opp med et sett med verdier som i neste omgang skal summeres og publiseres.

 

 

Her er koden:

 


<!DOCTYPE html>

<html>

<head>

<script language="JavaScript" type="text/javascript">
<!--

//-->


var gCntButton1 = new Number();
var gCntButton2 = new Number();
var gCntButton3 = new Number();
var gCntButton4 = new Number();
var gCntButton5 = new Number();
var gCntButton6 = new Number();
var gCntButton7 = new Number();
var gCntButton8 = new Number();
var gCntButton9 = new Number();


function kunnskap1()
{
gCntButton1=gCntButton1+1;
document.getElementById('txtCnt1').innerHTML=gCntButton1;
}

function kunnskap2()
{
gCntButton2=gCntButton2+1;
document.getElementById('txtCnt2').innerHTML=gCntButton2;
}

function kunnskap3()
{
gCntButton3=gCntButton3+1;
document.getElementById('txtCnt3').innerHTML=gCntButton3;
}

function kunnskap4()
{
gCntButton4=gCntButton4+1;
document.getElementById('txtCnt4').innerHTML=gCntButton4;
}

function kunnskap5()

{
gCntButton5=gCntButton5+1;
document.getElementById('txtCnt5').innerHTML=gCntButton5;
}

function kunnskap6()
{
gCntButton6=gCntButton6+1;
document.getElementById('txtCnt6').innerHTML=gCntButton6;
}

function kunnskap7()
{
gCntButton7=gCntButton7+1;
document.getElementById('txtCnt7').innerHTML=gCntButton7;
}

function kunnskap8()
{
gCntButton8=gCntButton8+1;
document.getElementById('txtCnt8').innerHTML=gCntButton8;
}

function kunnskap9()
{
gCntButton9=gCntButton9+1;
document.getElementById('txtCnt9').innerHTML=gCntButton9;
}



function alterText(){
document.getElementById('kommunikasjon').innerHTML = empDesignation();
}
function empDesignation(){
var output = txtCnt1 + txtCnt2;
return output
}



</script>

</head>



<body onload="javascript:alterText()">

<font face="verdana" size="3">



<table>
<tr>
<td>
Kommunikasjon
</td>
<td>
<button style="color:red;" onclick="kunnskap1()">1</button>
</td>
<td>
<button style="color:red;" onclick="kunnskap2()">2</button>
</td>
<td>
<button style="color:red;" onclick="kunnskap3()">3</button>
</td>
<td>
<button style="color:orange;" onclick="kunnskap4()">4</button>
</td>
<td>
<button style="color:orange;" onclick="kunnskap5()">5</button>
</td>
<td>
<button style="color:orange;" onclick="kunnskap6()">6</button>
</td>
<td>
<button style="color:green;" onclick="kunnskap7()">7</button>
</td>
<td>
<button style="color:green;" onclick="kunnskap8()">8</button>
</td>
<td>
<button style="color:green;" onclick="kunnskap9()">9</button>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="txtCnt1"></div>
</td>
<td>
<div id="txtCnt2"></div>
</td>
<td>
<div id="txtCnt3"></div>
</td>
<td>
<div id="txtCnt4"></div>
</td>
<td>
<div id="txtCnt5"></div>
</td>
<td>
<div id="txtCnt6"></div>
</td>
<td>
<div id="txtCnt7"></div>
</td>
<td>
<div id="txtCnt8"></div>
</td>
<td>
<div id="txtCnt9"></div>
</td>
<td>
<div id="kommunikasjon"></div>
</td>
</tr>

<table>

</body>

</html>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Feh

Feh

Skrevet
Skrevet

So much code. Such amaze. Wow. Very cumbersome.

 

Bare ved å google litt lappet jeg sammen noe lignende, bare på en mildt sagt mer effektiv måte vha jQuery:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[type=button]').click(function() {
		var number = $(this).attr('class').split('_').pop();
		var value = parseInt($('.input_'+number).val());
		value++;
		$('.input_'+number).val(value);	
	});
	$('.sum').click(function() {
		$('#inputs').each(function(){
			var totalPoints = 0;
			$(this).find('input[type=text]').each(function(i,n){
				totalPoints += parseInt($(n).val(),10); 
			});
			$('#count').text(totalPoints);
		});
	});
});
</script>
</head>

<body>
<div id="inputs">
<?php
	for ($i = 1; $i <= 10; $i++) {
    echo '<input type="button" class="button_'.$i.'" value="click"/><input type="text" class="input_'.$i.'" value="0" /><br />';
}
?>
</div>
<input type="button" class="sum" value="summer" />
<div id="count"></div>
</body>
</html>
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...