Convert jQuery to pure JavaScript

Question

I'm having problems trying to convert this piece of code from jQuery into pure JavaScript.

I've wrote everything down in a JSFiddle as example.

The script is

$(".button").click(function () {
    $pageID = $(this).attr('name');
    var htmlString = $('#' + $pageID).html();
    $('#1').html(htmlString);
});

$(".button").click(function () {
    $(".button").css('background-position', '0px 0px');
    $(this).delay(50).css('background-position', '0px -40px');
});

$(document).ready(function () {
    $("[name='page1']").trigger('click');
});

For the first block I've used

function changeNavigation(id){
    document.getElementById('1').innerHTML=document.getElementById(id).innerHTML;
}

And in each <div id="button"> added onclick="changeNavigation(id);" replacing id with page1 page2 etc for their respective buttons. Which seems to work fine. The problem is the second block of code.

I tried using

document.getElementById("button").style.background-position="0px -40px";

Changing the class to an id attribute, just to test it, but it doesn't work. What could be the problem? Is it that pure JS doesn't support background-position?

Also, as last thing, is it possible to use .innerHTML to write JS code? I've tried using both JS and jQuery to write Scripts and despite both writing the same exact thing, the written code didn't work with .innerHTML.

Your jQuery code uses a class selector (.button), so getElementById() definitely isn't the correct function. — Anthony Grist
– Anthony Grist, Commented Mar 10, 2014 at 10:43
Why have you binded two different clicks on same class? I mean, you cna perform the same task within a single event binding as well! — Sayed
– Sayed, Commented Mar 10, 2014 at 10:44
@Anthony Grist Yeah, I know. It's why I tried to change the classes to ids instea. — Marian
– Marian, Commented Mar 10, 2014 at 10:46
@Marian Well, IDs need to be unique, so trying to use multiple <div id="button"> elements isn't going to work. There's getElementsByClassName(), then you'd have to iterate over the returned collection and modify the style of each one individually. — Anthony Grist
– Anthony Grist, Commented Mar 10, 2014 at 10:47

Vinay · Accepted Answer · 2014-03-10 12:10:48Z

2

Try

style.backgroundPosition

instead of

style.background-position

Thanks to Anthony Grist.

You have used class not ID. So It would be something like

document.getElementsByClassName("button")[0].style.backgroundPosition="0px -40px"

edited Mar 10, 2014 at 12:10

answered Mar 10, 2014 at 10:42

Vinay

6,8774 gold badges34 silver badges51 bronze badges

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

3 Comments

Anthony Grist Over a year ago

@Marian It's not going to work. Not because they've told you something incorrect (they haven't), but because what you've tried to select before that isn't correct.

Marian Over a year ago

It seems as it fail to select it. The console gives this error Uncaught ReferenceError: s is not defined

Marian Over a year ago

Yeah, findled around with it also, found the solution. Thanks alot! final thing, as you see I only want to change the style to the clicked button, and the rest revert to the 'default' style with position 0px 0px so is it possible to select all of the divs and apply 0px 0px then to the clicked one 0px -40px?

David Hedlund · Accepted Answer · 2014-03-10 10:42:57Z

0

The hyphen is not valid in property names in JavaScript. Therefore, the CSS property background-position is called backgroundPosition in JavaScript.

answered Mar 10, 2014 at 10:42

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Collectives™ on Stack Overflow

Convert jQuery to pure JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related