I'm currently facing an issue with transferring my JavaScript output (start) from the black box to the grey box. I am unsure about what needs to be included in the functions (moveRight and moveLeft) for the transition to occur smoothly.
Even after researching for a solution, I couldn't find one that fits my requirements. I believe there is a more elegant way to showcase this code, but as I am still in the process of learning the basics, it seems challenging. Any assistance would be greatly appreciated. Thank you!
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>