Script for a talent tree

Loob

10-01-2011, 07:11 PM

Hi guys,

For a web project we want to have a talent calculator, sth. like this one: http://www.wowhead.com/talent#oh

- with a left click you can add a point, with a right click you can remove this one
- you should see somewhere how many points you still have

I haven´t so much experience with javascript so i want to ask, if you have a script (similar to this) which i can customize and start with.

I found this thread: http://www.codingforums.com/showthread.php?t=223671 and this code

<html>
<head>
<script type="text/javascript">
function m_click( what )
{
if ( what.style.backgroundColor == "lime" )
{
what.style.backgroundColor = "pink";
what.title = "0%";
} else {
what.style.backgroundColor = "lime";
what.title = "33%";
}
}
</script>
</head>
<body>
<form>
<input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
<input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
<input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
<input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
<input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
<input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
</form>
</body>
</html>

It´s a way too simple but it´s a start- maybe. :(

Thank you for the help!

sunfighter

10-02-2011, 06:35 PM

detecting the right click is a little hard. Using two buttons for add and subtract is a little easier to handle. This is a good starting point. I changed the onclick to onmousedown. the alerts are a place to start devolving your code.
<html>
<head>
<script type="text/javascript">
function button(){
document.getElementById("myDiv").onmousedown = function(e)
{
if(IsRightButtonClicked(e)){
alert("Right Button Down");
}else{
alert("Left Button Down");
}

}
}
function IsRightButtonClicked(e)
{
var rightclick = false;
e = e || window.event;
if (e.which)
rightclick = (e.which == 3);
else if (e.button)
rightclick = (e.button == 2);
return rightclick;
}
</script>
</head>
<body>
<div id="myDiv">
<input type="button" style="background-color: pink;" onmousedown="button();" />
<input type="button" style="background-color: pink;" onmousedown="button();" />
<input type="button" style="background-color: pink;" onmousedown="button();" />
<input type="button" style="background-color: pink;" onmousedown="button();" />
<input type="button" style="background-color: pink;" onmousedown="button();" />
<input type="button" style="background-color: pink;" onmousedown="button();" />
</div>
</body>
</html>
PS. I'm sure there are easy methods than this out there.

Loob

10-03-2011, 03:15 AM

Thanks for your answer.

Where in your code should i place the colors of the buttons?

{
if ( what.style.backgroundColor == "lime" )
{
what.style.backgroundColor = "pink";
what.title = "0%";
} else {
what.style.backgroundColor = "lime";
what.title = "33%";
}
}

sherlockturtle

10-03-2011, 03:28 AM

if you dont want a alert but dont want the right click stuff put this in the body script <body oncontextmenu="return false;"> it work in most browsers. I know it does not work with opera though...

sunfighter

10-03-2011, 02:57 PM

The question I saw was - with a left click you can add a point, with a right click you can remove this one
- you should see somewhere how many points you still have
Didn't know you also wanted color change. And I only gave you a start, not final code.