www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Need help for a javascript solution

  1. #1
    Join Date
    Nov 2013
    Posts
    3

    Need help for a javascript solution

    Hi.

    I have the code below with 9 buttons. When i click button one the for-loop must update the variable to 1.
    When i click the same button again the variable value will be 2 and so on.

    The for-loop below dosn't work it just put out each number up to 400.

    The same funktion i want in the other 8 buttons, when i click it one time its variable value will be 1 and by a second click its variable will be one.

    When clicking a buttone and a variable update i want to automatic go back to the button view page.

    To the rigth for the page i want a table with each variable is displayed as shown in this image: http://www.diskusjon.no/uploads/mont...1501_thumb.gif

    Can anyone help me?


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function kunnskap1()
    {
    
    for (var i = 1; i <= 400; i++) {
    document.writeln(i);
    }
    
    document.writeln("hei");
    
    }
    
    function kunnskap2()
    {
    
    document.writeln("hei2");
    
    }
    
    function kunnskap3()
    {
    
    document.writeln("hei3");
    
    }
    
    function kunnskap4()
    {
    
    document.writeln("hei4");
    
    }
    
    function kunnskap5()
    {
    
    document.writeln("hei5");
    
    }
    
    function kunnskap6()
    {
    
    document.writeln("hei6");
    
    }
    
    function kunnskap7()
    {
    
    document.writeln("hei7");
    
    }
    
    function kunnskap8()
    {
    
    document.writeln("hei8");
    
    }
    
    function kunnskap9()
    {
    
    document.writeln("hei9");
    
    }
    
    
    </script>
    </head>
    
    <body>
    
    <button onclick="kunnskap1()">1</button>
    <button onclick="kunnskap2()">2</button>
    <button onclick="kunnskap3()">3</button>
    <button onclick="kunnskap4()">4</button>
    <button onclick="kunnskap5()">5</button>
    <button onclick="kunnskap6()">6</button>
    <button onclick="kunnskap7()">7</button>
    <button onclick="kunnskap8()">8</button>
    <button onclick="kunnskap9()">9</button>
    
    
    </body>
    </html>

  2. #2
    Join Date
    Nov 2013
    Location
    London, United Kingdom
    Posts
    15
    document.writeln is most likely not the suitable method to archive what you are trying to. To make this task you need to recall the concept of variables in the global scope. So, for example, for the first task you need to introduce a global variable count and increase its value every time when user clicks the button. Then you archive this one:

    When i click button one the for-loop must update the variable to 1.
    When i click the same button again the variable value will be 2 and so on.
    The you probably will need to add if statement that checks if the value is 9 then do not increase it and instead set to 0. Or you can use % 10 for that.

    This will probably get some time. When you done it, just post your code here and someone will review it.

    Good luck.

  3. #3
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    242
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    	<title> Untitled </title>
    	<meta charset="utf-8">
    	<script>
    		function countClicks(that)
    		{
    			isNaN(that.value) ? that.value = 1 : (that.value >= 10) ? //limits the number of clicks to 10
    				alert("No more clicks left!!") : that.value = Number(that.value) + 1;	
    			return;
    		}
    	</script>
    </head>
    <body>
    	<input type="button" value="Button 1" onclick="countClicks(this)" />
            <input type="button" value="Button 2" onclick="countClicks(this)" />
            <input type="button" value="Button 3" onclick="countClicks(this)" />
    </body>
    </html>
    You can add as many buttons as you want...
    Last edited by tech_soul8; 11-09-2013 at 04:33 PM.

  4. #4
    Join Date
    Nov 2013
    Location
    London, United Kingdom
    Posts
    15
    This one is much better. It can be polished a little:

    Code:
    <!doctype html>
    <html>
    <head>
      <title> Untitled </title>
      <meta charset="utf-8">
      <script>
        function countClicks(button) {
          var value = parseInt(button.value, 10);
          if (isNaN(value)) {
            value = 1;
          } else if (value >= 10) {
            alert("No more clicks left!");
          } else {
            value += 1;
          }
          button.value = value;
        }
      </script>
    </head>
    <body>
      <input type="button" value="Button 1" onclick="countClicks(this)" />
      <input type="button" value="Button 2" onclick="countClicks(this)" />
      <input type="button" value="Button 3" onclick="countClicks(this)" />
    </body>
    </html>
    so what is next requirement? Do you still need to display a set of images of the numbers or the current approach is ok?

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    242
    Quote Originally Posted by AlexAtNet View Post
    This one is much better. It can be polished a little:

    Code:
    <!doctype html>
    <html>
    <head>
      <title> Untitled </title>
      <meta charset="utf-8">
      <script>
        function countClicks(button) {
          var value = parseInt(button.value, 10);
          if (isNaN(value)) {
            value = 1;
          } else if (value >= 10) {
            alert("No more clicks left!");
          } else {
            value += 1;
          }
          button.value = value;
        }
      </script>
    </head>
    <body>
      <input type="button" value="Button 1" onclick="countClicks(this)" />
      <input type="button" value="Button 2" onclick="countClicks(this)" />
      <input type="button" value="Button 3" onclick="countClicks(this)" />
    </body>
    </html>
    so what is next requirement? Do you still need to display a set of images of the numbers or the current approach is ok?
    ...if I may ask you what's that that you have done to make your code "so much better"???

    You used the same code that I have provided and just instead of using ?: conditionl statement you have used if statement. Is if statement in any way better then ?: conditional statement that I have used?

    Another thing you have so much improved is that you have used variable to hold buttons value and later on assign that value to the button. Once again is this approach so much better when you have code that's few lines long?

    I don't mind if anyone change my code or improve it in any way... but to state something like this "This one is much better..." and practically don't change a thing is rude from you.
    Last edited by tech_soul8; 11-09-2013 at 05:21 PM.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,154
    If I understand what you are asking, if you click the "Same" button the count goes up.

    Code:
    function countme(o){
         var c = parseInt(o.value);
         c = c<=400? c+1 : c;
         if(c>=400) alert("no more clicks left");
         document.getElementById("clicksleft").innerHTML = 400-c;
    	 o.value = c;
    }
    <input type="button" value="o" name="counter" onclick="countme(this);" />
    Clicks Left : <div id="clicksleft"></div>
    That will show how many clicks are left and update the button number, I gave it a quick test and all works, your use of it is not clear, so I wonder if its suitable for your needs.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Nov 2013
    Location
    London, United Kingdom
    Posts
    15
    Dear tech_soul8,

    in English language as understand it "this one is much better. it can be polished a little" means that this new one (your code that was submitted) is much better then the previous one (that you have submitted a post before) and I dare to add a few minor changes just to make it look better (I polish it a little) without touching the main functionality. So your understanding it as me claiming that I call my code much better changing only a few statements is wrong and so your ranting is useless.

    Good luck.

  8. #8
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    242
    Quote Originally Posted by AlexAtNet View Post
    Dear tech_soul8,

    in English language as understand it "this one is much better. it can be polished a little" means that this new one (your code that was submitted) is much better then the previous one (that you have submitted a post before) and I dare to add a few minor changes just to make it look better (I polish it a little) without touching the main functionality. So your understanding it as me claiming that I call my code much better changing only a few statements is wrong and so your ranting is useless.

    Good luck.
    if so then please accept my apologies. I have thought that you are talking about your code which is so much better than mine... Sorry once again!

  9. #9
    Join Date
    Nov 2013
    Location
    London, United Kingdom
    Posts
    15
    Hahaha. I understood. I thought that I'm looking at the code that is submitted by the thread author (so I wrote "this one is much better" keeping in mind that the thread author is trying to improve his original code) and so I asked about the next requirements. I overlooked that the author is changed and your post is actually a suggestion to the thread author.

    So you may be proud if yourself - I consider that your code is much better than author's. However, it still can be "polished a little"

    I apologize for misunderstanding and my kind regards to your patience.

  10. #10
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    242
    Quote Originally Posted by AlexAtNet View Post
    ... However, it still can be "polished a little"

    I apologize for misunderstanding and my kind regards to your patience.
    As I said, I don't mind it at all... There's numerous solutions for any given task... some of them are better (especially from more experienced programmers) and some of them are not.

    Feel free to improve my code as much as you can!

    Regards

  11. #11
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Based on the cute little picture the OP provided:

    index.html
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Need help for a javascript solution</title>
    
    		<style type="text/css">
    
    			TABLE {border-collapse: collapse;}
    			TH    {padding-right: 20px;}
    			TD    {border: 1px solid #000; padding: 0 5px;}
    
    		</style>
    
    		<script type="text/javascript">
    
    			function kunnskap(e)
    			{
    				var td = document.getElementById('hei' + e.innerHTML);
    				td.innerHTML = (Number(td.innerHTML) + 1) % 10;
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<table border="0" cellspacing="0" cellpadding="0">
    			<tr>
    				<th>
    					<button onclick="kunnskap(this);">1</button>
    					<button onclick="kunnskap(this);">2</button>
    					<button onclick="kunnskap(this);">3</button>
    					<button onclick="kunnskap(this);">4</button>
    					<button onclick="kunnskap(this);">5</button>
    					<button onclick="kunnskap(this);">6</button>
    					<button onclick="kunnskap(this);">7</button>
    					<button onclick="kunnskap(this);">8</button>
    					<button onclick="kunnskap(this);">9</button>
    				</th>
    				<td id="hei1">0</td>
    				<td id="hei2">0</td>
    				<td id="hei3">0</td>
    				<td id="hei4">0</td>
    				<td id="hei5">0</td>
    				<td id="hei6">0</td>
    				<td id="hei7">0</td>
    				<td id="hei8">0</td>
    				<td id="hei9">0</td>
    			</tr>
    		</table>
    
    	</body>
    </html>
    Last edited by bionoid; 11-09-2013 at 10:12 PM.
    JavaScript: Learn | Validate | Compact

  12. #12
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    and finally ( padonak feat. bionoid )

    index.htm

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Need help for a javascript solution</title>
    <style>
    TABLE {border-collapse: collapse;}
    TH    {padding-right: 20px;}
    TD    {border: 1px solid #000; padding: 0 5px;}
    body{padding-top:250px;}
    button{cursor:pointer;margin-left:5px}
    </style>
    <script>
    /*
    http://www.webdeveloper.com/forum/showthread.php?286123-Need-help-for-a-javascript-solution
    */
    function doc(id){return document.getElementById(id);}
    
    function El(elem,txt){
    this.elem=elem;
    this.txt=txt;
    this.app=function(id){
    var b=document.createElement(this.elem);
    b.innerHTML=this.txt;
    
    switch(this.elem){
    case'button':
    b.onclick=function(){
    var td=doc('hei'+this.innerHTML);
    td.innerHTML=(Number(td.innerHTML)+1)%10;
    this.blur();
    }
    break;
    case'td':
    b.id='hei'+(document.getElementsByTagName('td').length+1);
    break;
    default:;
    }
    doc(id).appendChild(b);
    }
    }
    
    window.onload=function(){
    document.getElementsByTagName('tr')[0].setAttribute('id','there');
    document.getElementsByTagName('th')[0].setAttribute('id','here');
    for(var i=1;i<10;i++){var a=new El('button',i),b=new El('td','0');a.app('here');b.app('there');}
    }
    </script>
    </head>
    <body>
    <table align="center" border="0" cellspacing="0" cellpadding="0"><tr><th></th></tr></table>
    </body>
    </html>
    live demo
    Last edited by Padonak; 11-10-2013 at 02:40 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  13. #13
    Join Date
    Nov 2013
    Posts
    3
    Thank you for all your replies.

    I have been working with my code the last days, but i have met another problem.

    I tried to make a function named sum where i multiply each of my txtCnt variables by its number ( var sum1 = txtCnt1*1, var sum2 = txtCnt2*2 ans so on).
    Next thing to do is to add sum1, sum2... sum9 and i would get the total in sumx. The last operation is to divide sumx by 9 to get the mean value in variable called output

    Code:
    <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>
    Now i have to put the value in my table, but i can't get this right.

    Code:
    <table>
    <td><div id="output"></div></td> 
    </table>
    Can anyone help me with this?

  14. #14
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,154
    quickest way to grab an element is by its 'id' and you would use something like this
    Code:
    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;
    out = document.getElementById("output");
    out.innerHTML = output;
    }
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  15. #15
    Join Date
    Nov 2013
    Posts
    3
    Thank you. But I cant get it right.

    This is my code so far:

    Code:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>AutSys</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;
    out = document.getElementById("output");
    out.innerHTML = output;
    }
    </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[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="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="total"></div></td> 
                </tr> 
            </table> 
            <br /><br /> 
            Totalt : <span id="total"></span> 
       
    		</body> 
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles