Question

我可以使用警报执行此操作，但我想将函数的结果直接打印到网页。

当用户点击汽车按钮时，我希望car()函数的结果写入我的id="mainContent" div。

如果用户点击“冰淇淋”按钮，我希望冰淇淋按钮的结果用mainConten功能的结果替换iceCream() t div中的结果

Answer 1

var mainContent = document.getElementById('mainContent');
carButton.onclick = function() {
    mainContent.appendChild(document.createTextNode(car()));
}

Answer 2

假设你有这样的代码：

<form id="ice_cream_form" action="fake" method="post">
    <input type="submit" value="Ice Cream" />
</form>

你可以使用这样的JavaScript代码：

var form=document.getElementById("ice_cream_form");
var mainContent=document.getElementById("mainContent");
if(form.addEventListener) {
    form.addEventListener("submit", submitted, false);
}else if(form.attachEvent) {
    form.attachEvent("onsubmit", function() {
        return submitted(window.event);
    });
}
function submitted(event) {
    if("textContent" in mainContent) {
        mainContent.textContent=iceCream();
    }else{
        mainContent.innerText=iceCream();
    }
    event.preventDefault();
    event.stopPropagation();
    return false;
}

如果iceCream返回要显示的HTML而非要显示的纯文本，则可能需要将更改textContent的部分替换为仅设置innerHTML。< / p>

或者，你可以使用内联事件处理程序（虽然我不喜欢这种方法，因为它混合了内容和行为）：

<input type="button" value="Ice Cream" onclick="document.getElementById('mainContent').textContent=iceCream(); return false;" />

Answer 3

例如，当点击汽车按钮时，应该运行以下代码：

document.getElementById("mainContent").appendChild(
    document.createTextNode(car())); /* ← there is the magic */

如果您不知道在单击按钮的情况下如何注册此功能。
然后这样做：

var button = document.getElementById("idOfTheButton");
button.addEventListener("click",
    function()
    {
        document.getElementById("mainContent").appendChild(
            document.createTextNode(car()));
    }, 1);

适当调整此代码以适应其他按钮，它也可以正常工作。

使用按钮将文本写入页面

3 个答案: