将文本值输入div？

Question

说我有这个文本框：

<input type="text" id="myText" placeholder="Enter Name Here">

按下按钮后，我要发送在此div中输入的值：

<div id="text2"></div>

我不太确定该怎么做。 我是否创建一个函数并将其调用到div？ 我该怎么做？

有人可以帮我清理一下吗？ 谢谢。

Answer 1

将onclick添加到您的按钮：

<input type="button" id="somebutton" onclick="addText()">

然后编写javascript：

function addText()
{
    document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}

Answer 2

使用onclick事件的解决方案 ：

<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>

JSFiddle： http : //jsfiddle.net/3kjqfh6x/1/

Answer 3

您可以从javascript代码操纵div中的内容。 您的按钮应该触发一个函数（使用onclick事件），该函数将访问DOM中的特定div（使用getElementById函数）并更改其内容。

基本上，您需要执行以下操作：

<!DOCTYPE html>
<html>
<script>
function changeContent() {
    document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>

<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>

</body>
</html>

Answer 4

标记D，您需要包含Javascript以处理按钮单击，并且在按钮调用的函数中，应将值发送到div中。 您可以调用$("#myText").val()获取文本框的文本，并$("#txtDiv").text(txtToAppend)将其附加到div。 请查看以下代码片段作为示例。

 function submitTxt() { $("#txtDiv").text($("#myText").val()) }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="myText" placeholder="Enter Name Here"> <button onclick = "submitTxt()"> Submit </button> <div id="txtDiv"> </div>

Answer 5

HTML可以是：

<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>

JavaScript应该是外部的：

//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){

if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
  text2.innerHTML = E('myText').value;
}

}
//]]>

Answer 6

我建议使用类似jQuery的库来执行此操作。 它将简化事件处理和dom操作。 尽管如此，我将包括香草JS和jQuery示例。

假设正文中的HTML如下所示：

<form>
    <input id="myText" type="text" placeholder="Enter Name Here">
    <br>
    <input type="submit" id="myButton">
</form>
<div id="text2"></div>

Vanilla JS示例：

//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
    e.preventDefault(); //stop page request
    //grab div and input reference
    var myText = document.getElementById("myText");
    var myDiv = document.getElementById("text2");
    //set div with input text
    myDiv.innerHTML = myText.value;
});

尽可能避免使用内联onclick属性，从长远来看，这可以使您的代码更易于管理。

这是jQuery版本：

//Handles button click
$('#myButton').click(function(e){
    e.preventDefault(); //stop page request
    var myText = $('#myText').val(); //gets input value
    $('#text2').html(myText); //sets div to input value
});

jQuery示例假定您已将库添加到脚本标签中。

将文本值输入div？

问题描述

6 个解决方案

解决方案1
2 已采纳 2015-03-04 01:19:55

解决方案2
0 2015-03-04 01:20:26

解决方案3
0 2015-03-04 01:21:27

解决方案4
0 2015-03-04 01:27:05

解决方案5
0 2015-03-04 01:37:04

解决方案6
0 2015-03-04 01:59:31

将文本值输入div？

问题描述

6 个解决方案

解决方案1 2 已采纳 2015-03-04 01:19:55

解决方案2 0 2015-03-04 01:20:26

解决方案3 0 2015-03-04 01:21:27

解决方案4 0 2015-03-04 01:27:05

解决方案5 0 2015-03-04 01:37:04

解决方案6 0 2015-03-04 01:59:31

解决方案1
2 已采纳 2015-03-04 01:19:55

解决方案2
0 2015-03-04 01:20:26

解决方案3
0 2015-03-04 01:21:27

解决方案4
0 2015-03-04 01:27:05

解决方案5
0 2015-03-04 01:37:04

解决方案6
0 2015-03-04 01:59:31