使用按钮将文本写入页面

-2

我可以使用警报执行此操作，但我希望将功能的结果直接打印到网页上。使用按钮将文本写入页面

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

如果用户点击了冰淇淋按钮，我想从冰淇淋按钮，结果更换什么都与从iceCream()功能

来源

2011-10-10 Overcranked

我认为这是你要找的东西：http://www.tizag.com/javascriptT/javascript-innerHTML.php – Turnsole

谢谢你这个链接，这是非常有帮助的。我无法找到可以理解的参考。 – Overcranked

的结果mainConten牛逼DIV假设你有一些像这样的代码：

<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。

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

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

来源

2011-10-10 00:14:09 icktoofay

你可能想提一下IE可能带来的问题，比如'addEventListener（）'/'attachEvent（）'和IE使用'innerText'而不是'textContent'。 – alex

@alex：是;我可能应该。 – icktoofay

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

来源

2011-10-10 00:14:39 alex

我认为文本节点方法比'.innerHTML + = carstuff;'效率更高... ... –

@JaredFarrish：应该是，更不用说它不会销毁任何无法序列化成HTML字符串的东西，重新解析。 – alex

有人可以向我解释节点吗？ – Overcranked

时，例如，车按钮被点击，该代码应运行：

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);

适当地适应此代码为其他按钮，它也能工作。

来源

2011-10-10 02:53:22

使用按钮将文本写入页面

回答

相关问题