如何输入和输出 Javascript？答案

【问题标题】：How to Input and Output Javascript?如何输入和输出 Javascript？
【发布时间】：2014-01-09 19:39:14
【问题描述】：

好的，伙计们，在这种情况下我需要帮助，如果可以，请提供帮助:( 我有关注 div 用 text-type input 创建的

<div class="footer">

 <div id="footerInner">

    <form>
    <input type="text" name="enter" value="" id="input"/>
    </form>

 </div>
 </div>

上面我也创建了.footer .mainBody

<div class="mainBody">

    <script src="Scripts/main.js">

    var h = document.getElementById('input').value;

    document.write(h);

    </script>

</div>

我已经在其中包含了 Javascript 我想这样工作：当我在输入标签中输入文本以出现在.mainBody div.
而且我是否需要按钮来提交输入，或者可以通过按键来完成。 “进入”？伙计们onkeyup="writeThis()" 不工作它只是重新加载页面:(

【问题讨论】：

不要使用 document.write。如果在页面加载后使用该方法，它将覆盖整个页面。相反，选择目标元素并以这种方式设置值。
但是怎么做呢？我不知道该怎么做:(
我正在从标题中删除 HTML5 标记和单词，因为它是 JS 一般问题和解释，与 HTML5 无关。

标签： javascript input output

【解决方案1】：

要在 keyevents 上执行一些事件，您需要在元素中编写 onkeyup 或 onkeydown 或任何其他 key 函数。在该属性中，您可以添加响应事件的函数名称。我会将我的函数名称写为writethis()，这会将值写入div。

然后你需要使用这个：

<input type="text" id="input" onkeyup="writethis()" />

函数是：

function writethis() { // the function 
  var h = document.getElementById('input').value; // the value
  document.getElementsByClassName('mainBody').innerHTML = h; // the input
}

这样，您将获得写在按键上的输入！

您也可以尝试使用一些关键事件，例如：

if(event.keyCode == 13) { // enter key event
  /* key code for enter is 13 
   * do what so ever you want */
}

【讨论】：

@Pointy 抱歉，我只是在更新我的答案 :)
好的，现在好多了:)
他的回答显示了更好的技术。获取值并通过 .innerHTML 方法或其他方法将其写入“mainBody”div。
你可以使用.innerHTML = @userdevastator :)
非常感谢你们所有人！再次感谢！ :)

【解决方案2】：

好的，试试这个作为 html head 部分的 JS 脚本内容：

function writeOnBody() {
    var inputText = document.getElementById('input').value;
    var mainBodyEl = document.getElementById('mainBody');
    mainBodyEl.innerHTML = inputText;
}

您的 HTML 代码：

<div class="footer">
    <div id="footerInner">
        <form>
            <input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
        </form>
    </div>
</div>
<div id='mainBody' class="mainBody"></div>

我希望它有所帮助。 JSFiddle 示例：http://jsfiddle.net/amontellano/JAF89/

【讨论】：

您应该始终解释正在发生的事情，而不是仅仅编写代码并说“试试这个”，否则 OP 什么也学不到，他们（或其他人）将继续问同样的问题。
当然。感谢@Gary 的反馈。下次我会考虑的。

【解决方案3】：

var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;

避免使用getElementsByClassName，而是给你一个 div id 并使用getElementById.. 休息在我看来是最好的解决方案..

是的，你也可以给你一个按钮，你所要做的就是像这样在 onclick 事件上调用你的函数

<button onclick="functionZ()">click me</button>

并在您的 java 脚本中定义 functionZ

我们在这里做的是.. 在其上添加一个按钮和一个单击事件..这样，当单击该按钮时，它将为我们调用一个函数.. 确保在页面从上到下加载时将脚本添加到页面的最后部分，因此最好将脚本添加到正文末尾附近

【讨论】：