Question

我有一些东西＆＃34;帖子＆＃34;像Twitter一样。我希望这个功能在＆＃34; postBox＆＃34;打开也是。但我目前的问题是postBox根本没有打开。

这是我的JSFiddle

HTML：

<input type="button" name="answer" value="post" onclick="openBox()" />

<div id="postBox" style="display:none;">
<center>
    <input type="text" name="post" maxlength="100" />
    <br>
    </br>
    <button style="border : solid 0px #000080; border-radius : 4px; moz-border-radius : 4px; -webkit-box-shadow : 0px 0px 5px rgba(0, 0, 0, 1.0); -moz-box-shadow : 0px 0px 5px rgba(0,0,0,1.0); box-shadow : 0px 0px 5px rgba(0,0,0,1.0); font-size : 24px; font-style : ;color : #ffffff; padding : 4px 10px; background-color : #000080;">post</button>
    <br/>
    <br/>
    <center>
    <table class="rows"></table>
</center>
</center>
</div>

使用Javascript：

var btn = document.getElementsByTagName("button")[0];
var inpt = document.getElementsByName("post")[0];

function openBox() {
   document.getElementById('postBox').style.display = "block";
}

btn.onclick = function () {

    if (!inpt.value) alert("Please enter something to post.");

    var tbl = document.getElementsByTagName("table")[0];
    var row = tbl.insertRow(0);
    var cell = row.insertCell(0);
    var txt = document.createTextNode(inpt.value);
    cell.appendChild(txt);
    tbl.insertRow(0);
    tbl.insertRow(0);

    inpt.value = "";

};

Answer 1

如何设置JSFiddle是一个问题：openBox函数不在全局/窗口范围内：

更改

function openBox() {
   document.getElementById('postBox').style.display = "block";
}

到

window.openBox = function() {
    document.getElementById('postBox').style.display = "block";
}

http://jsfiddle.net/yqh2rqh0/33/

Answer 2

您选择在左侧的jsFiddle选项中运行代码onLoad。请改为选择No wrap - in <body>，您的代码将有效。

您也可以使用No wrap - in <head>，但需要进行一些小的更改才能正常工作（请参阅：http://jsfiddle.net/yqh2rqh0/27/）

显示/隐藏div并仍然使用内容 - HTML / JS

2 个答案: