JavaScript出力を他の領域に移動する

JavaScript出力（start）をブラックボックスからグレーボックスに移動する際に問題があります。出力を別のものに移動させるために、関数（moveRightとmoveLeft）をどのように入れるべきかについて完全にはわかりません。JavaScript出力を他の領域に移動する

解決策を検索しようとしましたが、解決策を見つけることができませんでした。私はこのコードを提示するより良い方法があると確信していますが、私はまだ基本を学んでいます。ありがとうございました。

function start() { 
 
    var txt; 
 
    var person = prompt("Please enter your name:", ""); 
 
    if (person == null || person == "") { 
 
    txt = "User cancelled the prompt."; 
 
    } else { 
 
    txt = person; 
 
    } 
 
    document.getElementById("text").innerHTML = txt; 
 
} 
 

 
function moveRight(start) { 
 

 
} 
 

 
function moveLeft(start) { 
 

 
}

.blackbox { 
 
    width: 250px; 
 
    height: 125px; 
 
    background: #000000; 
 
    float: left; 
 
    color: white; 
 
    text-align: center; 
 
    height: 90px; 
 
    line-height: 90px; 
 
} 
 

 
.greybox { 
 
    width: 250px; 
 
    height: 125px; 
 
    background: #323232; 
 
    float: left; 
 
    text-align: center; 
 
    height: 90px; 
 
    line-height: 90px; 
 
} 
 

 
.button { 
 
    position: relative; 
 
    float: left; 
 
    padding-left: 10px; 
 
} 
 

 
.part3 { 
 
    position: relative; 
 
    float: left; 
 
}

<div id="part3"> 
 
    <button type="button" onclick="start()">Start</button> 
 
    <button type="reset">Clear</button><br><br><br> 
 

 
    <div class="part3"> 
 
    <div class="blackbox" id="text"></div> 
 
    <div class="button"> 
 
     <br> 
 
     <button type="button" onclick="moveRight(start)">--></button><br><br> 
 
     <button type="button" onclick="moveLeft(start)"><--</button> 
 
    </div> 
 
    <br><br> 
 
    <div class="greybox" id="name"></div> 
 
    </div> 
 
</div>

出典

2017-09-19 DaniSerb

このコードでは、ボタンは黒とグレーのボックス間の値

var txt; 
 

 
function start() { 
 
    var person = prompt("Please enter your name:", ""); 
 
    if (person == null || person == "") { 
 
     txt = "User cancelled the prompt."; 
 
    } else { 
 
     txt = person; 
 
    } 
 
    document.getElementById("text").innerHTML = txt; 
 
} 
 

 
function moveRight() { 
 
    document.getElementById('name').innerHTML = txt; 
 
    document.getElementById('text').innerHTML = ''; 
 
} 
 

 
function moveLeft() { 
 
    document.getElementById('text').innerHTML = txt; 
 
    document.getElementById('name').innerHTML = ''; 
 
}

.blackbox{ 
 
    width:250px; 
 
    height:125px; 
 
    background:#000000; 
 
    float: left; 
 
    color: white; 
 
    text-align: center; 
 
    height: 90px; 
 
    line-height: 90px; 
 
} 
 

 
.greybox{ 
 
    width:250px; 
 
    height:125px; 
 
    background:#323232; 
 
    float: left; 
 
    text-align: center; 
 
    height: 90px; 
 
    line-height: 90px; 
 
} 
 

 
.button{ 
 
    position: relative; 
 
    float: left; 
 
    padding-left: 10px; 
 
} 
 

 
.part3{ 
 
    position: relative; 
 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<title>Test</title> 
 
<meta charset="UTF-8"> 
 
</head> 
 
<body> 
 

 
<div id="part3"> 
 
<button type="button" onclick="start()">Start</button> 
 
<button type="reset">Clear</button><br><br><br> 
 

 
<div class="part3"> 
 
<div class="blackbox" id="text"></div> 
 
<div class="button"> 
 
    <br> 
 
    <button type="button" onclick="moveRight()" >--></button><br><br> 
 
    <button type="button" onclick="moveLeft()" ><--</button> 
 
</div> 
 
<br><br> 
 
<div class="greybox" id="name"></div> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-09-19 15:00:04 winseybash

は、コンテンツの移動、あなたが何をしたいのか、このです交換可能2つのボックスから：

function start() { 
 
    var txt; 
 
    var person = prompt("Please enter your name:", ""); 
 
    if (person == null || person == "") { 
 
     txt = "User cancelled the prompt."; 
 
    } else { 
 
     txt = person; 
 
    } 
 
    document.getElementById("text").innerHTML = txt; 
 
} 
 

 
function moveRight() { 
 
document.getElementById("name").innerHTML = document.getElementById("text").innerHTML; 
 
document.getElementById("text").innerHTML=""; 
 
} 
 

 
function moveLeft() { 
 
document.getElementById("text").innerHTML = document.getElementById("name").innerHTML; 
 
document.getElementById("name").innerHTML=""; 
 
}

.blackbox{ 
 
    width:250px; 
 
    height:125px; 
 
    background:#000000; 
 
    float: left; 
 
    color: white; 
 
    text-align: center; 
 
    height: 90px; 
 
    line-height: 90px; 
 
} 
 

 
.greybox{ 
 
    width:250px; 
 
    height:125px; 
 
    background:#323232; 
 
    float: left; 
 
    text-align: center; 
 
    height: 90px; 
 
    line-height: 90px; 
 
} 
 

 
.button{ 
 
    position: relative; 
 
    float: left; 
 
    padding-left: 10px; 
 
} 
 

 
.part3{ 
 
    position: relative; 
 
    float: left; 
 
}

<div id="part3"> 
 
<button type="button" onclick="start()">Start</button> 
 
<button type="reset">Clear</button><br><br><br> 
 

 
<div class="part3"> 
 
<div class="blackbox" id="text"></div> 
 
<div class="button"> 
 
    <br> 
 
    <button type="button" onclick="moveRight()" >--></button><br><br> 
 
    <button type="button" onclick="moveLeft()" ><-- </button> 
 
</div> 
 
<br><br> 
 
<div class="greybox" id="name"></div> 
 
</div> 
 
</div>

出典

2017-09-19 15:02:24

JavaScript出力を他の領域に移動する

答えて

関連する問題