Javascript help: getting values from span tags

Discussion in 'JavaScript and AJAX' started by sosolid2k, Dec 11, 2006.

  1. sosolid2k

    sosolid2k New Member

    Joined:
    Dec 11, 2006
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    I have made a webpage for a online game to record items you get from monsters, i am currently developing it for my A level computing project using php and made this as a demo of what it will do.

    The new version will have a database and other features for people to save their logs but some people are already using this version and have told me it is rarther annoying transfering the items and total drops to a text file to save it. So if anyone can help me with this that would be great, like i said i don't know javascript and don't really understand how this code works :(

    What i want to be able to do is add a button to the page and when a user clicks it, it will get the values from the text boxes (i know how to do this in php but not javascript) and also get the number next to the item (this i don't know how to get, they are in span tags) and display the items something like this so it can just be copied and pasted into the text document:

    Coins - 100
    herb - 24
    sword - 12
    shield - 6
    helmet - 18

    Here is a link to the page http://www.rsmonsterdb.com/drop-recorder.html


    And the code:

    Code:
    <html>
    <head>
    
    <title> Runescape Drop recorder</title> 
    
    </head>
    <body bgcolor="gray" link=#3300CC vlink=#3300CC alink=#3300CC>
    
    <br><br>
     <center><table width="95%" border="1" cellspacing="0" cellpadding="4">
      <tr>    	  
        <td width="15%" class="header" align="left" bgcolor="#000000"><b><a href="http://www.rsmonsterdb.com/">Home</a></b></td>
    <td width="15%" class="header" align="left" bgcolor="#000000"><b><a href="http://z3.invisionfree.com/rsw27">Forums</a></b></td>
    <td width="15%" class="header" align="left" bgcolor="#000000"><b><a href="http://www.rsmonsterdb.com/All-Monsters.html">Monster List</a></b></td>
    <td width="15%" class="header" align="left" bgcolor="#000000"><b><a href="http://www.rsmonsterdb.com/Group-L.html">Group List</a></b></td></tr></table></center> <br><br><br>
    <br>
    <script type="text/javascript"><!--
    google_ad_client = "pub-9193287939326016";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90_as";
    google_ad_type = "text_image";
    google_ad_channel ="";
    google_color_border = "FFFFFF";
    google_color_link = "0000FF";
    google_color_bg = "FFFFFF";
    google_color_text = "000000";
    google_color_url = "008000";
    //--></script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script><br><br>
    
    <br>
    <br>
    <img SRC="http://img485.imageshack.us/img485/9418/godworship8js.jpg" width="480" height="200">
    <br>
    <br>
    <br>
    <h1>Runescape drop recorder</h1>
    <br>
    
    <br>
    <br>
    <br>
    <br>
    <b>Instructions:</b>
    <br>
    <ul>
    <br><li>Enter the item name in the text box</li>
    <br><li>Then when you get the item as a drop, click the "+" button next to the item box</li>
    <br><li>The total amount of drops will be displayed beside the item</li>
    <br><li>You can then calculate your total kills by clicking "total kills"</li>
    <ul/>
    
    <br>
    <br>
    <b>Tips:<b>
    <ul>
    <br><li>If you fill all 20 slots, you can open another window and record the further drops there, or call the last box "other" to store un-important items 
    <br><li>Keep the commonly dropped items close to each other, this means less scrolling up and down trying to find them!</li>
    <hr width="100%"><br>
    <center>Monster name</center><br>
    <center><input type="text" size="20" name="inputmonster"></center>
    <br><br>
    <hr width="100%">
    <br>
    
    <script type="text/javascript" language="javascript">
    <!--
    
    var values = [0];
    var total =0;
    
    function add(element, key) {
     if(values[key])
       values[key] = values[key] + 1;
     else
       values[key] = 1;
    
     element.nextSibling.nodeValue = values[key];
    
    total++;
    }
    
    
    
    function showtotal(element) {
     
    element.nextSibling.nodeValue = total;
    
    }
    
    
    //-->
    
    </script>
    
    <div>
    <input type="text" size="20" name="input1">
    <input type="button" name="button1" value="+" onclick="add(this, 0)" /> 
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input2">
    <input type="button" name="button2" value="+" onclick="add(this, 1)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input3">
    <input type="button" name="button3" value="+" onclick="add(this, 2)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input4">
    <input type="button" name="button4" value="+" onclick="add(this, 3)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input5">
    <input type="button" name="button5" value="+" onclick="add(this, 4)" />
    <span></span>
    
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input6">
    <input type="button" name="button6" value="+" onclick="add(this, 5)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input7">
    <input type="button" name="button7" value="+" onclick="add(this, 6)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input8">
    <input type="button" name="button8" value="+" onclick="add(this, 7)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input9">
    <input type="button" name="button9" value="+" onclick="add(this, 8)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input10">
    <input type="button" name="button10" value="+" onclick="add(this, 9)" />
    
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input11">
    <input type="button" name="button11" value="+" onclick="add(this, 10)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input12">
    <input type="button" name="button12" value="+" onclick="add(this, 11)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input13">
    <input type="button" name="button13" value="+" onclick="add(this, 12)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input14">
    <input type="button" name="button14" value="+" onclick="add(this, 13)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input15">
    
    <input type="button" name="button15" value="+" onclick="add(this, 14)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input16">
    <input type="button" name="button16" value="+" onclick="add(this, 15)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input17">
    <input type="button" name="button17" value="+" onclick="add(this, 16)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input18">
    <input type="button" name="button18" value="+" onclick="add(this, 17)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input19">
    <input type="button" name="button19" value="+" onclick="add(this, 18)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div><input type="text" size="20" name="input20">
    <input type="button" name="button20" value="+" onclick="add(this, 19)" />
    <span></span>
    </div>
    
    <hr width="100%">
    
    <div>
    <input type="button" name="buttonkills" value="Total kills" onclick="showtotal(this)" />
    <span></span>
    </div>
    
    
    <br><br><br>
    <hr width="100%"><BR><BR>
    
    
    Drop recorder created by Sosolid2k, hope it helps!
    <br>
    <br>You are visiter number -
    
    <!-- SuperCounters Code Start -->
    <a href="http://www.supercounters.com/"><img 
    src="http://www.supercounters.com/image/pix.gif" alt="free 
    website counter" border="0" width="1" height="1"></a>
    <img src="http://www.supercounters.com/counter.php?id=125424" 
    border="0" alt="free website counter">
    <a href="http://www.directvdeals.us"><img src="http://www.supercounters.com/image/pix.gif" 
    border="0" alt="dish network" width="1" height="1"></a>
    <NOSCRIPT><a href="http://www.directvdeals.us"><font size="1">dish network</font></a></NOSCRIPT>
    
    <!-- SuperCounters Code End-->
    
    
    
    <h5>
    This Drop recorder is not affiliated with <a href="http://www.runescape.com">Runescape</a> or Jagex, it is not in any way an official product of <a href="http://www.runescape.com">Runescape</a>.
    <br>
    <a href="http://www.runescape.com">Runescape</a> logo property of Jagex  Ltd, Jagex and <a href="http://www.runescape.com">Runescape</a> are registered trademarks of Jagex Limited.
    
    <br></h5>
    <br>
    <br><CENTER> <script type="text/javascript"><!--
    google_ad_client = "pub-9193287939326016";
    google_ad_width = 468;
    google_ad_height = 60;
    google_ad_format = "468x60_as_rimg";
    google_cpa_choice = "CAAQleCTlwIaCOBI271HULXzKNO193M";
    google_ad_channel = "";
    //--></script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script> </CENTER><BR><BR>
    <center>Copyright &copy; 2006 Sosolid2k<center>
    <br>The contents of this web page may not be taken and published in any manner without the written permission of Sosolid2k
    
    <br><br>
    
    
    </body>
    </html>
    
    
    
    <div id="ads"><script type="text/javascript"><!--
    google_ad_client = "pub-6138449238097342";
    google_ad_width = 728;
    google_ad_height = 15;
    google_ad_format = "728x15_0ads_al_s";
    google_ad_channel ="6285660060";
    google_color_border = "FFFFFF";
    google_color_bg = "FFFFFF";
    google_color_link = "000000";
    google_color_url = "000000";
    google_color_text = "000000";
    //--></script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></div><div style="display: none;"><a href="http://jamroll.co.uk/personal/ryan/delusive.php">firstgeneration-mawkish</a></div><!-- Start of StatCounter Code -->
    <div style="display:none"><script type="text/javascript" language="javascript">
    var sc_project=1436001; 
    var sc_invisible=1; 
    var sc_partition=13; 
    var sc_security="e533926e"; 
    var sc_remove_link=1; 
    </script>
    
    <script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><img  src="http://c14.statcounter.com/counter.php?sc_project=1436001&amp;java=0&amp;security=e533926e&amp;invisible=1" alt="free statistics" border="0" /> </noscript></div>
    <!-- End of StatCounter Code -->
    Thanks for any help :)
     
  2. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    You can use Regular Expressions or access the span through the DOM to get the text inside the span tag.

    Code:
    // this is just an example
    '<span>hi how r u?</span>'.match(/<span>(.+)<\/span>/);
    var text = RegExp.$1;
    
    //now the variable text contains 'hi how r u?'
    
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice