Hjelp til å summere variabel-verdier

Prosjeik · 23 Nov 2013

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:

Kode:

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:

Kode:

<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:

Kode:

<!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>

spikre · 23 Nov 2013

Jeg er ikke spesielt flink til JS, men kan en del PHP. Det første jeg merker meg er den vanvittige gjentakelsen over alt. I PHP bruker vi feks array eller while til å lage loop.
I steden for kunnskap1 kunnskap2 osv kan du bruke noe lignende dette: while ($id>#) { kunnskap{$id}; $id++; }
Dessuten bør du bruke CSS-klasser. Er nettstedet stort og komplekst bør du også bruke det til andre funksjoner i andre språk.

selbekk · 23 Nov 2013

Kode:

var output = txtCnt1 + txtCnt2;

På denne linjen må du definere txtCnt1 og txtCnt2. Jeg kan ikke se at du har sagt hva de to variablene skal være noe sted.

adeneo · 23 Nov 2013

Valider HTML'en din og pass på at alle elementer er lukket osv, fjern all inline CSS og Javascript, og skrive HTML'en først, når den er slik du vil ha den kan du legge på form og funksjon i eksterne scripts / stylesheets osv.

Forsøk å bruk event handlere i stedet for ting som onclick="" og annen elendighet, og du ender opp med noe sånt:

PHP:

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .red   {color: red;}
            .green {color: green;}
        </style>
        <script type="text/javascript">
            function addEvent(obj, evType, fn) {
                if (obj.addEventListener) {
                    obj.addEventListener(evType, fn, false);
                    return true;
                } else if (obj.attachEvent) {
                    return obj.attachEvent("on" + evType, fn);
                }
            }
            
            function populate() {
                +(document.getElementById('txtCnt'+parseInt(this.innerHTML,10)).innerHTML)++;
                var divs  = document.getElementsByTagName('div'),
                    total = 0;
                
                for (var i=divs.length; i--;) {
                    if (
                        divs[i].id.indexOf('txtCnt')===0 && divs[i].innerHTML.length && !( isNaN(divs[i].innerHTML) )) {
                        total += parseInt(divs[i].innerHTML, 10);
                    }
                }
                document.getElementById('total').innerHTML = total;
            }
            
            addEvent(window, 'load', function() {
                var buttons = document.getElementsByTagName('button');
                for (var i=buttons.length; i--;) addEvent(buttons[i], 'click', populate);
            });
            
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>Kommunikasjon</td>
                <td><button class="red">1</button></td>
                <td><button class="red">2</button></td>
                <td><button class="red">3</button></td>
                <td><button class="red">4</button></td>
                <td><button class="red">5</button></td>
                <td><button class="red">6</button></td>
                <td><button class="green">7</button></td>
                <td><button class="green">8</button></td>
                <td><button class="green">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>
        <br /><br />
        Totalt : <span id="total"></span>
    </body>
</html>

Test her !

Prosjeik · 5 Des 2013

Tusen takk for gode tilbakemeldinger. Har ikke hatt tid til dette på en stund nå, men nå skal jeg fortsette. Har prøvd koden til adeneo og den fungerer perfekt.

Først må jeg innrømme at jeg har glemt å fortelle at verdien i txtCnt1 skal ganges med 1, verdien i txtCnt2 skal ganges med to osv...

Det vil si at dersom jeg har trykket på fem ganger på knapp 2 og fått verdien 5 i variabel txtCnt2 så skal 5 ganges med 2 som blir 10.

Når dette gjøres med alle verdier skal de nye verdiene summeres og deles på 9.

Hvis noen vet hvordan jeg kan løse det så hadde det vært flott

Prosjeik · 5 Des 2013

Har prøvd meg på en løsning som jeg beskriver over, men jeg har ikke fått det til å virke.

Jeg prøver å bruke summen av klikk under knapp 1 ganget med 1, summen av klikk under knapp 2 ganget med 2 osv... til slutt har jeg prøvd å summere alle disse igjen for så å dele summen på 9.

Målet er å få ut snittet. Trykker jeg en gang på 5 og en gang på 7 skal resultatet bli 6.

Er noe jeg gjør feil i koden for jeg får det ikke til å fungere.

Her er koden:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.red {color: red;}
.orange {color: orange;}
.green {color: green;}
</style>

<script type="text/javascript">
function sum() {
var sum1 = txtCnt1*1;
var sum2 = txtCnt2*2;
var sum3 = txtCnt3*3;
var sum4 = txtCnt4*4;
var sum5 = txtCnt5*5;
var sum6 = txtCnt6*6;
var sum7 = txtCnt7*7;
var sum8 = txtCnt8*8;
var sum9 = txtCnt9*9;
var sumx = sum1 + sum2 + sum3 + sum4 + sum5 + sum6 + sum7 + sum8 + sum9;
var output = sumx/9;
}
</script>

<script type="text/javascript">
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent) {
return obj.attachEvent("on" + evType, fn);
}
}

function populate() {
+(document.getElementById('txtCnt'+parseInt(this.innerHTML,10)).innerHTML)++;
var divs = document.getElementsByTagName('div'),
total = 0;

for (var i=divs.length; i--

{
if (
divs.id.indexOf('txtCnt')===0 && divs.innerHTML.length && !( isNaN(divs.innerHTML) )) {
total += parseInt(divs.innerHTML, 10);
}
}
document.getElementById('total').innerHTML = total;
}

addEvent(window, 'load', function() {
var buttons = document.getElementsByTagName('button');
for (var i=buttons.length; i-- addEvent(buttons, 'click', populate);
});

</script>
</head>
<body>
<table>
<tr>
<td>Kommunikasjon</td>
<td><button class="red">1</button></td>
<td><button class="red">2</button></td>
<td><button class="red">3</button></td>
<td><button class="orange">4</button></td>
<td><button class="orange">5</button></td>
<td><button class="orange">6</button></td>
<td><button class="green">7</button></td>
<td><button class="green">8</button></td>
<td><button class="green">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="output"></div></td>
</tr>
</table>
<br /><br />
Totalt : <span id="total"></span>

</body>
</html>

Hjelp til å summere variabel-verdier

Prosjeik

New Member

spikre

peterhamre.no

selbekk

Medlem

adeneo

Medlem

Prosjeik

New Member

Prosjeik

New Member