Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/forums/javascript/)
-   -   Javascript help: getting values from span tags (http://www.go4expert.com/forums/javascript-help-getting-values-span-tags-t2204/)

sosolid2k 11Dec2006 20:01

Javascript help: getting values from span tags
 
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 :)

pradeep 12Dec2006 13:09

Re: Javascript help: getting values from span tags
 
You can use Regular Expressions or access the span through the DOM to get the text inside the span tag.

Code: JavaScript

// 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?'
 



All times are GMT +5.5. The time now is 02:07.