javascript - 输入值如何打印到表格中？

Question

我希望输入值以 id="realuchat" 打印在表格的右下角，但以下代码不起作用。我尝试通过将其添加为带有 js 的新元素来使用，但它出错了。请帮助我。

function xyz(){
	var a = document.getElementById("chat");
	a.placeholder="   ";
	a.addEventListener("mouseout",gh);
	function gh(){
		a.placeholder="Type a message...";
	}
	a.addEventListener("keyup",jh);
	function jh(){
		preventDefault();
		if(keycode === 13){
			document.getElementById("sub").click();
		}
	}
}
function talk(){
	var htalk = document.getElementById("realhchat");
	var utalk = document.getElementById("realuchat");
	var talk= document.getElementById("chat").value;
	var elh = document.createElement("td");
	var elu = document.createElement("td");
	var diau = document.createTextNode(talk);
	var table = document.getElementById("realuchat");
	table.appendChild(td);
}

<div id="mlink" align="right" style="padding-top:5px;">
	<a href="daju.html" class="mlink">Home</a>
	<a href="wallpaper.html" class="mlink" style="padding-left:18px">Wallpapers</a>
</div>
<div class="header" align="center"><p class="websitename">daju.in</p></div>
<div id="daju" align="left">
<p><img src="heavren.jpg" width="100" height="100" style="padding-right:8px;"/>
<table id="fakechat" border="0" cellpadding="2px"  bgcolor="blue"><tr><td>Hey what"s up? Welcome to Daju.in.Let's start to talk.</td></tr></table></p></div> 
<div align="left"><table border="0" cellpadding="2px" id="realhchat" bgcolor="#4c68d7"></table>
<div align="right"><table border="0" cellpadding="2px" id="realuchat" bgcolor="#bc2a8d"></table>
<div id="chatroom" style="padding-top:20px;">
	<form align="center">
		<input onmouseover="xyz()" id="chat" type="text" placeholder="Type a message..."/>
		<input id="sub" onsubmit="talk()" type="submit" value="Send"/>
	</form><p id="l"></p>
</div>

标签： javascripthtml

Answer 1

我已经修复了您的主要错误 - 如果您愿意，您可以进一步调整代码：

function xyz(){
	var a = document.getElementById("chat");
	a.placeholder="   ";
	a.addEventListener("mouseout",gh);
	function gh(){
		a.placeholder="Type a message...";
	}
	a.addEventListener("keyup",jh);
	function jh(evt){
		evt.preventDefault();
		if(evt.keycode === 13){
			document.getElementById("sub").click();
		}
	}
}
function talk(evt){
		evt.preventDefault();
	var htalk = document.getElementById("realhchat");
	var utalk = document.getElementById("realuchat");
	var talk= document.getElementById("chat").value;
	var elh = document.createElement("tr");
	var elu = document.createElement("td");
	var diau = document.createTextNode(talk);
	var table = document.getElementById("realuchat");
    diau.innerHTML = talk;
    elu.appendChild(diau);
    elh.appendChild(elu);
	table.appendChild(elh);
}

<div id="mlink" align="right" style="padding-top:5px;">
	<a href="daju.html" class="mlink">Home</a>
	<a href="wallpaper.html" class="mlink" style="padding-left:18px">Wallpapers</a>
</div>
<div class="header" align="center"><p class="websitename">daju.in</p></div>
<div id="daju" align="left">
<p><img src="heavren.jpg" width="100" height="100" style="padding-right:8px;"/>
<table id="fakechat" border="0" cellpadding="2px"  bgcolor="blue"><tr><td>Hey what"s up? Welcome to Daju.in.Let's start to talk.</td></tr></table></p></div> 
<div align="left"><table border="0" cellpadding="2px" id="realhchat" bgcolor="#4c68d7"></table>
<div align="right"><table border="0" cellpadding="2px" id="realuchat" bgcolor="#bc2a8d"></table>
<div id="chatroom" style="padding-top:20px;">
	<form align="center" onsubmit="talk(event)" >
		<input onmouseover="xyz()" id="chat" type="text" placeholder="Type a message..."/>
		<input id="sub" type="submit" value="Send"/>
	</form><p id="l"></p>
</div>