Question

我正在尝试查看是否可以使用脚本在单击＆＃34;提交＆＃34;时将两个文本区域写入单个文件。在我的页面上？（对于总体上下文，这些是本地托管在机器上的HTML页面，并且不在任何地方的服务器上）

我成功学会了用javascript：eraseText删除两个文本区域，并将该按钮设置为＆＃34;＆＃34;。

我一直在寻找一个选择，但我不知道我是否以正确的方式提问。

感谢任何帮助。

为了清晰起见编辑

<!DOCTYPE html>
<html>
<head>
<script>

function eraseText() {
    document.getElementById("one").value = "";
    document.getElementById("two").value = "";
}

function submit() {


}

</script>
</head>
<body>

<div id="boxes">

<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>

</div>

<p></p>
<input type="button" value="Clear" onclick="javascript:eraseText();">
<input type="button" value="Submit" onclick="javascript:submit();">

</body>
</html>

所以我想点击提交并将值设置为＆＃34;一个＆＃34;和＆＃34;两个＆＃34;解析为单个HTML输出。

Answer 1

<!DOCTYPE html>
<html>
<head>
<script>

function eraseText() {
    document.getElementById("one").value = "";
    document.getElementById("two").value = "";
}

function submit() {
    var combined = "";
    combined += document.getElementById("one").value;
    combined += document.getElementById("two").value;
    document.getElementById("destination").innerHTML = combined;
}

</script>
</head>
<body>

<div id="boxes">

<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>

</div>

<p id="destination"></p>
<input type="button" value="Clear" onclick="eraseText();">
<input type="button" value="Submit" onclick="submit();">

</body>
</html>

Answer 2

如果我正确理解您的问题，那么没有使用任何服务器端代码来实现此目的的解决方案如下：

让我们写下你的HTML目前可能是什么样的。

<textarea></textarea>
<textarea></textarea>
<button type="submit">Submit</button>

让我们首先添加一个预览将出现的输出区域。这可能是<div></div>元素。

现在，为所有元素添加id属性（我将使用ID＆＃34; a＆＃34;，＆＃34; b＆＃34;，＆＃34; c＆＃34 ;和＆＃34; d＆＃34;，以及输出DIV。这允许JavaScript代码使用文档对象模型轻松获取某个元素。

完成后，这就是代码

＆＃13;

document.getElementById("d").addEventListener("click", function(){ // do this when element with id `d` is clicked
    document.getElementById("c").innerHTML = // set the output element's inner HTML to...
                                            document.getElementById("a").value + document.getElementById("b").value 
})

＆＃13;

<textarea id="a"></textarea>
<textarea id="b"></textarea>
<div id="c"></div>
<button id="d">Submit</button>

＆＃13;

document.getElementById(IDGOESHERE)返回一个JavaScript对象，表示具有该ID的元素。 .addEventListener将事物绑定到发生的事件（在这种情况下，click事件会触发要调用的函数）。

该函数获取两个textareas的值，并使用+运算符将它们添加（连接）在一起，该运算符与字符串连接。

然后使用输出元素的.innerHTML属性分配此HTML。

我不确定这是不是你想要的，所以请澄清一下是不是。

是否可以使用submit函数将textareas保存到新文件？

2 个答案: