onload not working on vanilla

jeongwee · August 2018

the onload works if i insert onload="function()" into master.default.tpl file.

but it won't work if i use

document.getElementById("**").onload = **

document.getElementsByTagName("**")[*].onload = **

document.getElementsByClassName("**")[*].onload = **

on *.js files.

why is that?

x00 · August 2018

becuase it is incorrect javascript it won't work outside of vanilla either. that attribute only exist for body, and you are using a very 90s approach to events.

what is it you are trying to do?

jeongwee · August 2018

@x00

I want to change the icons here to make it retina-ready ( @2x double sized pictures )
becoz it was bad to display at my IPhone and IPad.
Its been better after i changed them, but i found that it has problem to display with new background urls when i touch on the screen of IPad and IPhone.

picture below unbookmarked

i touch on the screen
it should be become like picture blow

but it display like this which is the style i wrote for *:hover , and it stucks on the style and will not pass to picture 2.

once i click on any of other button like the gear icon left site , the picture become correct now like below

I guess that becoz i changed the urls so probbaly the inside js wont work.
I want to make it a theme so i can not just replace the pictures to a folder that not under the theme folder.
So i think i have to write codes for ontouchend and ontouchstart probably ? Am i right?
So i made the codes like this

document.getElementsByClassName("Hijack Bookmark")[0].ontouchend = changeBookmark;

var c = document.getElementsByClassName("Hijack Bookmark")[0];

var d = c.innerHTML;



function changeBookmark(){

if(d==="Bookmark"){

    this.style.background = "url(" + gdn.url('/themes/Colors/design/images/bookmarked.png') + ")";

}

else{

    this.style.background = "url(" + gdn.url('/themes/Colors/design/images/bookmark.png') + ")";

}


};

vanilla supports Discussions per Page 10 to 100, so if needed i will add [*] to [100].

but the codes above won't works , i replaced the function as onclick and test on a w3s page http://www.w3school.com.cn/tiy/t.asp?f=js_ifthenelse and i'ts working ( not the codes you saw from the page , I customed the codes of the page, just saying i use this to test onclick if that works ontouchstart or ontouchend should be also works ? ). But after i change it to ontouchend and move to *.js file. It wont work anymore. I try test everything like

document.getElementById("**").onload = **

document.getElementsByTagName("**")[*].onload = **

document.getElementsByClassName("**")[*].onload = **

document.getElementById("**").onclick = **

document.getElementsByTagName("**")[*].onclick = **

document.getElementsByClassName("**")[*].onclick = **

on *.js files.

all of them doesnt working. but they are working on the page i was testing

http://www.w3school.com.cn/tiy/t.asp?f=js_ifthenelse

onclick onload works only if i insert the onclick="" or onload="" to the elements of default.master.tpl file.

but there has no such elements exist on the default.master.tpl file.

Sorry im bad and just start to learn js, I dont know how to use any frame yet . so i just the "pure" javascript.

x00 · August 2018

first don't use hand rolled javascript, use jquery something like

jQuery(document).ready(function($) {
    $('.Hijack.Bookmark').on('touchstart mouseover', function() {
         $(this).css({'background-image': "url(" + gdn.url('/themes/Colors/design/images/bookmarked.png') + ")"});
    })

    $('.Hijack.Bookmark').on('touchend mouseout', function() {
         $(this).css({'background-image': ''});
    })
});

Also I think you need a better understanding of javascript in general You are not using the correct syntax. Ther is no substitute from properly understanding what you are doing. So suggest you do a short course.

jeongwee · August 2018

thanks man , going to take a look on jQuery now.

onload not working on vanilla

Comments