{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 孤傲高冷的网名 的问题《onclick not working in external js-file, but in in》','https://www.manongdao.com/q-712551.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
What I want : change text-color to red on text in a <h1>tag with <id="headline">
Anyone that has an idea why the following code does not work, but further down in this question, that code work by moving onclick-event to inline code?
Does not work : following code written in external js-file
function changeColor(){
document.getElementById("headline").style.color = "red";
}
document.getElementById("headline").onclick = changeColor;
Works : Following code written in external js-file (function is the same):
function changeColor(){
document.getElementById("headline").style.color = "red";
}
…and this written in inline code:
<h1 id="headline" onclick="changeColor()">with inline code this text change color on click</h1>
Without seeing more of your code, I would assume that you are creating and binding the
changeColor()function in a javascript file that is loaded in the<head>of your HTML.If so, the element with id headline doesn't exist yet (the javascript file is being processed before the HTML has fully loaded), so you are trying to bind to a non-existent element.
If this is the case, either move your script include to the bottom of the
<body>element , or wrap the binding in awindow.onloadfunction as seen in this jsFiddle.