1

我在使用 javascript 时遇到问题。我正在尝试创建一个按钮，该按钮将导致一些内容加载到我得到的内容之上。我创建了一些函数来做到这一点。如果脚本已经加载，如果我在 HTML 页面上测试该函数，它会完美运行，但是，当我使用 onclick 事件调用该函数时，它只会创建一个包含内容的全新 .html 页面。

我知道这一点是因为我保存了它创建的页面，然后我查看了源代码，它只是一个空白页面，其中 javascript 函数的内容写在 body 标记中。

这是HTML。

            <ul class="sub-menu">
                <li onclick='articleRead("test", DeviantArtUpdateContent)'><a href="#Deviant Art Update">Deviant Art Update</a></li>
                <li><a href="#">'Triumph At Last' Album Preview</a></li>
                <li><a href="#">Short Funny and Stupid</a></li>
                <li><a href="#">Project Preview</a></li>

            </ul>

<div id="aID"></div>

这是javascript。

function articlePopUp   ( title , content)  {
document.write('<div class="backgroundFade"></div>');
document.write('<div class="articlePosition"><div class="closeArticle">Close</div>');
document.write('<div class="articleRead">');
document.write('<h1>');
document.write(title);
document.write('</h1>');
document.write('<div class="grey-line"></div>');
document.write(content);
document.write('</div></div>');
}
function articleRead ( title, content)  {
    document.getElementById("aID").innerHTML=articlePopUp(title,content);   
}

就像我之前说的，如果我只是在没有 onclick 事件的情况下调用 HTML 文档中的函数，它会按照我想要的方式工作，但是添加 onclick 事件会在我单击它时创建一个空白文档。我想将该函数写入预期 div id 中的现有文档中。提前感谢任何帮助，这真的让我很难过。

4

2 回答 2

1

页面加载完成后，进入关闭状态。

调用document.write已关闭的文档将隐式调用document.open它将启动一个新文档。

无论如何，您都不想将内容添加到文档中articlePopUp。您正在尝试将其返回值分配给innerHTML属性。由于没有明确的返回值，也就是说undefined（由于上述原因，该元素无论如何都不存在）。

让你的函数构建一个字符串并返回它。

var html = '<div class="backgroundFade"></div>';
html = html + '<div class="articlePosition"><div class="closeArticle">Close</div>';
// etc
return html;

更好的是，使用createElement,createTextNode和appendChild朋友。

于 2013-04-24T10:15:53.283 回答
0

document.write如果在页面加载后调用它，它将清空整个页面。您可能想innerHTML改用。

function articlePopUp( title , content)  {
    htmlContent = '';
    htmlContent += '<div class="backgroundFade"></div>';
    htmlContent += '<div class="articlePosition"><div class="closeArticle">Close</div>';
    htmlContent += '<div class="articleRead">';
    htmlContent += '<h1>';
    htmlContent += title;
    htmlContent += '</h1>';
    htmlContent += '<div class="grey-line"></div>';
    htmlContent += content;
    htmlContent += '</div></div>';
    return htmlContent;
}
function articleRead ( title, content)  {
    document.getElementById("aID").innerHTML = articlePopUp(title,content);
}
于 2013-04-24T10:17:14.210 回答