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操作。尽管如此，我将包括vanilla 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 个答案: