通过单击按钮，将右侧div框中的文本切换到左侧div框，反之亦然
通过单击按钮，将右侧div框中的文本切换到左侧div框，反之亦然
提问于 2019-02-01 12:29:37
我需要要求用户的输入点击按钮“开始”，并显示在左侧的div框中，然后有2个按钮，可以切换文本从左侧框到右侧和另一个按钮切换回左侧的文本，毕竟另一个按钮来清除它。我被切换部分和清晰部分卡住了。我的清晰脚本遇到了一些问题，它不能清除内容。我不知道如何开始切换部分。
这是我的代码：
<html>
<style>
.container{
width:900px;
height:200px;
}
.grey-box{
background-color:grey;
width:300px;
height:200px;
float:right;
}
.black-box{
background-color:black;
width:300px;
height:200px;
float:left;
}
.button{
position:relative;
left:110px;
top:50px;
}
</style>
<script>
function start(){
var name = prompt("Please enter your name");
document.getElementById("name").innerHTML = name;
}
function clear(){
document.getElementById("name").innerHTML = "";
}
</script>
<button onClick="start();">Start</button>
<button onClick="clear()">Clear</button>
<br/ ><br />
<div class="container">
<div class="black-box" id="leftBox"><p id="name" style="color:white;text-
align:center;margin:100px;"></p></div>
<div class="grey-box" id="rightBox"></div>
<div class="button">
<button onClick="le2ri()">--></button><br /><br />
<button onClick="ri2le()"><--</button>
</div>
</div>
</html>理想情况下，我希望有这样的页面，在输入后，它将显示在左边的框最初，当我按下右边的按钮，用户输入将前往右边的框。当我按下向左按钮时，用户输入将转到左侧。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-01 12:40:22
试一试，单击按钮将简单地复制每个按钮的textContent并将其放入另一个框中。不要调用你的函数clear()，因为它引用了Document.clear()。
您的clear函数将始终由document.clear()隐藏，因此您需要更改负责清除文本的函数的名称。
<html>
<style>
.container{
width:900px;
height:200px;
}
.grey-box{
background-color:grey;
width:300px;
height:200px;
float:right;
}
.black-box{
background-color:black;
width:300px;
height:200px;
float:left;
}
.button{
position:relative;
left:110px;
top:50px;
}
</style>
<script>
function start(){
var name = prompt("Please enter your name");
document.getElementById("name").textContent = name;
}
function clearText(){
document.getElementById("name").textContent = "";
}
function le2ri(){
document.getElementById("rightBox").textContent = document.getElementById("name").textContent
document.getElementById("name").textContent = "";
}
function ri2le(){
document.getElementById("name").textContent = document.getElementById("rightBox").textContent
document.getElementById("rightBox").textContent = "";
}
</script>
<button onclick="start();">Start</button>
<button onclick="clearText();">Clear</button>
<br/ ><br />
<div class="container">
<div class="black-box" id="leftBox"><p id="name" style="color:white;text-
align:center;margin:100px;"></p></div>
<div class="grey-box" id="rightBox"></div>
<div class="button">
<button onClick="le2ri()"> To right </button><br /><br />
<button onClick="ri2le()"> To left </button>
</div>
</div>
</html>
Stack Overflow用户
发布于 2019-02-01 13:05:59
试试这个：
<html>
<head>
<style>
.container {
width: 900px;
height: 200px;
}
.grey-box {
background-color: grey;
width: 300px;
height: 200px;
float: right;
}
.black-box {
background-color: black;
width: 300px;
height: 200px;
float: left;
}
.button {
position: relative;
left: 110px;
top: 50px;
}
</style>
</head>
<body>
<button onClick="start()">Start</button>
<button onClick="clearField()">Clear</button>
<br /><br />
<div class="container">
<div class="black-box" id="leftBox">
<p style="color:white;text-align:center;margin:100px;"></p>
</div>
<div class="grey-box" id="rightBox">
<p style="color:white;text-align:center;margin:100px;"></p>
</div>
<div class="button">
<button onClick="leftRight()">Move Right</button>
<br /><br />
<button onClick="rightLeft()">Move Left</button>
</div>
</div>
</body>
<script>
// dom reference
const blackBox = document.querySelector("#leftBox");
const greyBox = document.querySelector("#rightBox");
let name;
// start function
function start() {
name = prompt("Please enter your name");
// make sure user input something
if (name !== "") {
blackBox.children[0].innerHTML = name;
} else {
alert("Type your name.");
}
}
// left 2 right function
function leftRight() {
// setting first box to empty
blackBox.children[0].innerHTML = "";
// adding name value to the right box
greyBox.children[0].innerHTML = name;
}
// left 2 right function
function rightLeft() {
// setting first box to empty
blackBox.children[0].innerHTML = name;
// adding name value to the right box
greyBox.children[0].innerHTML = "";
}
function clearField() {
// clearing out the fields and the name value
blackBox.children[0].innerHTML = "";
greyBox.children[0].innerHTML = "";
name = "";
}
</script>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54472916
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号