Pass CSS id as a parameter in JavaScript function

Question

I've a CSS id which shows a small red ball and a JAVASCRIPT function. I want to pass the CSS id as a parameter in the JavaScript function. I've seen a lot of tutorials but can't figure it out. Here are the codes:

CSS code

#projectile{
    position: absolute;
    background-color: #ff0000;
    left:176px;
    top: 486px;
    width:10px;
    height:10px;
    border-radius: 8px;
    z-index: 9;
}

JAVASCRIPT code

function gofish(projectile_id){
var projectile = getElementbyId(projectile_id);
start_x = projectile.offset().left;
start_y = projectile.offset().top;

function init()
{ setTimeout("gofish('projectile')", 500); }

Do you have a getElementbyId function, or did you actually mean document.getElementbyId — adeneo
– adeneo, Commented Mar 29, 2014 at 6:50
And it looks like you're using jQuery from the offset() function ? — adeneo
– adeneo, Commented Mar 29, 2014 at 6:50
Open up the browser console, you'll find it useful to viewing error messages. — jdigital
– jdigital, Commented Mar 29, 2014 at 6:52
@adeneo, I tried with both getElementbyId and document.getElementbyId but nothing worked. And yes I'm using jquery offset function. — Shihan Khan
– Shihan Khan, Commented Mar 29, 2014 at 6:55
@user2611329 - I thought so, and I've posted an answer below — adeneo
– adeneo, Commented Mar 29, 2014 at 6:59

adeneo · Accepted Answer · 2014-03-29 06:54:25Z

2

Lets assume you're using jQuery and that you want a jQuery object to use the offset() method as no such method exists for plain DOM nodes

function gofish(projectile_id){
    var projectile = $('#' + projectile_id);
    var start_x = projectile.offset().left;
    var start_y = projectile.offset().top;
}

function init() { 
    setTimeout(function() {
        gofish('projectile');
    }, 500); 
}

answered Mar 29, 2014 at 6:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shihan Khan Over a year ago

this worked. Just it should be projectile = $('#' + projectile_id); instead of var projectile = $('#' + projectile_id);. Tnx, it helped a lot! :)

adeneo Over a year ago

That would make the variable global, and you should generally avoid that, but if it works it works. Happy to help!

Rajit · Accepted Answer · 2014-03-29 07:10:42Z

You have a few mistakes in your JavaScript.

getElementById should have a capital 'b', and should be called against document.
I think the offset properties you are look for are element.offsetLeft and element.offsetTop.
You can define an anonymous function directly on setTimeout to call init(), exactly as adeneo has suggested.
You will still need to call init() somewhere in order for it to run.

Here is updated JavaScript code:

function gofish(projectile_id) {
    var projectile = document.getElementById(projectile_id);
    start_x = projectile.offsetLeft;
    start_y = projectile.offsetTop;
}

function init() {
    setTimeout(function () {
        gofish('projectile');
    }, 500);
}

init();

And here is the code in action, so far: http://jsfiddle.net/JuvDX/

Vijayadhas Chandrasekaran · Accepted Answer · 2014-03-29 07:24:00Z

0

This may help you little..

    <!DOCTYPE html>
<html>
<head>

<script>
function myFunction(element)
{
alert(document.getElementById(element.id).value);
}
</script>
<style>
#para1
{
text-align:center;
color:red;
} 
</style>
</head>

<body>
<p id="para1" onclick="myFunction(this)" name="paragraph" >Hello World!</p>
</body>
</html>

answered Mar 29, 2014 at 7:24

Vijayadhas Chandrasekaran

2,0093 gold badges30 silver badges65 bronze badges

Collectives™ on Stack Overflow

Pass CSS id as a parameter in JavaScript function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related