Convert jQuery to pure JavaScript -

i'm having problems trying convert piece of code jquery pure javascript.

i've wrote down in jsfiddle 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 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 page1 page2 etc respective buttons. seems work fine. problem second block of code.

i tried using

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

changing class id attribute, test it, doesn't work. problem? pure js doesn't support background-position?

also, last thing, possible use .innerhtml write js code? i've tried using both js , jquery write scripts , despite both writing same exact thing, written code didn't work .innerhtml.

try

style.backgroundposition

instead of

style.background-position 

thanks anthony grist.

you have used class not id. like

document.getelementsbyclassname("button")[0].style.backgroundposition="0px -40px"