function hide (x, reflow2) {
if (reflow2) {
x.style.display = "none";
}
else {
x.style.visibility = "hidden";
}
}
function debug(msg) {
//find the debugging section of the document, looking at html id attributes
var log = document.getElementById("debuglog");
//if no element with the id "debuglog" exists, create one.
if (!log) {
log = document.createElement("div");
log.id = "debuglog";
log.innerHTML = "<h1> Debug log </h1>";
document.body.appendChild(log);
}
//now wrap the message in its own <pre> and append it to the log
var pre = document.createElement('pre');
var text = document.createTextNode(msg);
pre.appendChild(text);
log.appendChild(pre);
}
function highlight(e) {
var divi = document.getElementByTagName('p');
if (!e.className)
e.className="hilite";
}
else {
e.className += "hilite";
}
html:
<p>Whatever</p>
<button onclick="hide(this,true); debug('hide button 1'); highlight(p);">hide button</button>
在上面的示例中,我无法使用突出显示功能突出显示段落元素。有谁能告诉我我做错了什么?
我还想知道如何使用functionname(this)以外的函数; 使用functionName(TextMessage的);
我可以通过其他方式将元素等信息传递给函数吗?
答案 0 :(得分:1)
在按钮回调中,您正在呼叫highlight(p)
。在此上下文中,p
是未定义的变量,因此不会突出显示任何内容。我建议您为<p>
元素提供ID并修改回调以通过其ID检索<p>
元素:
<p id="myP">Whatever</p>
<button onclick="hide(this, true);
debug('hide button 1');
highlight(document.getElementById('myP'));">Hide button</button>
当然,将所有回调代码移动到自己的函数中并将其注册为按钮单击事件的回调会更好:
/* In HTML: */
<p id="myP">Whatever</p>
<button id="hideBtn">Hide button</button>
/* In JS */
window addEventListener("DOMContentLoaded", function() {
var myP = document.getElementById("myP");
var btn = document.getElementById("hideBtn");
btn.addEventListener("click", function() {
hide(btn, true);
debug('hide button 1');
highlight(myP);
});
});