Hi I am trying to get only one of my 3 divs to show once the appropriate button is clicked but nothing happens could some one help me out?
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS:GO Team Hub</title>
<style type="text/css">
html{
width:100%;
height:100%;
}
body { /* Used to set the size of the webpage so you don't get 2 pictures */
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 1em;
}
h1 {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
}
.center {
text-align: center;
width: 100%;
border:1px solid #8AC007;
}
.empty_spc{
width: 100%;
border:1px solid #8AC007;
padding-top: 3%;
}
.container{
width: 50%;
height: 10%;
border: 1px solid #090dc0;
padding: 1% 25% 1% 25%;
}
.same_row_div{
width: 26%;
height: 100%;
float: left;
display: block;
margin: 0 auto;
text-align: center;
border:1px solid #8AC007;
}
button{
height: 100%;
width: 100%;
vertical-align: middle;
background-color: darkred;
margin:auto;
border-color: #bc3315;
}
input:focus{
outline: none;
}
a{
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
color:white;
}
.settings_block{
height: 30% ;
width: 70%;
padding: 5% 15%;
border:1px solid #8AC007;
}
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e){
case e='bo1s':
e.style.display = 'block';
'bo3s'.style.display = 'none';
'bo5s'.style.display = 'none';
break;
case e = 'bo3s':
e.style.display = 'block';
'bo1s'.style.display = 'none';
'bo5s'.style.display = 'none';
break;
case e = 'bo5s':
e.style.display = 'block';
'bo1s'.style.display = 'none';
'bo3s'.style.display = 'none';
break;
}
}
</script>
</head>
<body background="OverpB_blur.png" >
<div class="empty_spc"></div>
<div class="center">
<h1 align="center">Choose Your Veto Settings</h1>
</div><br>
<br>
<div class="container" style="height: 8%;">
<div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
<div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
<div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
</div>
<div class="settings_block" id="bo1s" style="display: none;">test1</div>
<div class="settings_block" id="bo3s" style="display: none;">test2</div>
<div class="settings_block" id="bo5s" style="display: none;">test3</div>
</body>
</html>
As you can see I am trying to show the correct div and hide the two others but for some reason it does not work, maybe it is something wrong with my switch startement?
First, you're missing a </style> tag.
Your JavaScript is not going to work. It's got several problems:
case e='bo1s': isn't correct syntax. You want it to look like
case 'bo1s':.
You're evaluating an element and testing it for
strings. Instead make it read switch (id) { Then you're testing
the id and comparing it to a string.
Inside each case you're trying
to work with elements using just their id. You'll need
getElementById for those as well.
Here is your code, working. Styles omitted for brevity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS:GO Team Hub</title>
<style type="text/css">
/* ignoring your styles */
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (id){
case 'bo1s':
e.style.display = 'block';
document.getElementById('bo3s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo3s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo5s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo3s').style.display = 'none';
break;
}
}
</script>
</head>
<body background="OverpB_blur.png" >
<div class="empty_spc"></div>
<div class="center">
<h1 align="center">Choose Your Veto Settings</h1>
</div><br>
<br>
<div class="container" style="height: 8%;">
<div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
<div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
<div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
</div>
<div class="settings_block" id="bo1s" style="display: none;">test1</div>
<div class="settings_block" id="bo3s" style="display: none;">test2</div>
<div class="settings_block" id="bo5s" style="display: none;">test3</div>
</body>
</html>
Change your switch statement to switch (e.id) {
At the moment you're comparing the HTML element to a string, you need to access the id property and compare that to the string instead.
There were a couple of things wonky with your JavaScript. Here is a link to a working JSFiddle:
https://jsfiddle.net/qyh1uyk3/11/
this.toggle_visibility = function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e.id){
case e.id = 'bo1s':
e.style.display = 'block';
$('#bo3s').css('display', 'none');
$('#bo5s').css('display', 'none');
break;
case e.id = 'bo3s':
e.style.display = 'block';
$('#bo1s').css('display', 'none');
$('#bo5s').css('display', 'none');
break;
case e.id = 'bo5s':
e.style.display = 'block';
$('#bo1s').css('display', 'none');
$('#bo3s').css('display', 'none');
break;
}
};
I found that your function wasn't being triggered by the click events. In this example I should point out that I am using JQuery.
This should fix the </style> issue and your switch issue. You should probably take a look at your CSS as well since the buttons appear to be cut off.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS:GO Team Hub</title>
<style type="text/css">
html{
width:100%;
height:100%;
}
body { /* Used to set the size of the webpage so you don't get 2 pictures */
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 1em;
}
h1 {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
}
.center {
text-align: center;
width: 100%;
border:1px solid #8AC007;
}
.empty_spc{
width: 100%;
border:1px solid #8AC007;
padding-top: 3%;
}
.container{
width: 50%;
height: 10%;
border: 1px solid #090dc0;
padding: 1% 25% 1% 25%;
}
.same_row_div{
width: 26%;
height: 100%;
float: left;
display: block;
margin: 0 auto;
text-align: center;
border:1px solid #8AC007;
}
button{
height: 100%;
width: 100%;
vertical-align: middle;
background-color: darkred;
margin:auto;
border-color: #bc3315;
}
input:focus{
outline: none;
}
a{
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
color:white;
}
.settings_block{
height: 30% ;
width: 70%;
padding: 5% 15%;
border:1px solid #8AC007;
}
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e.id){
case e.id ='bo1s':
e.style.display = 'block';
document.getElementById('bo3s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case e.id = 'bo3s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case e.id = 'bo5s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo3s').style.display = 'none';
break;
}
}
</script>
</head>
<body background="OverpB_blur.png" >
<div class="empty_spc"></div>
<div class="center">
<h1 align="center">Choose Your Veto Settings</h1>
</div><br>
<br>
<div class="container" style="height: 8%;">
<div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
<div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
<div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
</div>
<div class="settings_block" id="bo1s" style="display: none;">test1</div>
<div class="settings_block" id="bo3s" style="display: none;">test2</div>
<div class="settings_block" id="bo5s" style="display: none;">test3</div>
</body>
</html>
Close off the tag before the tag, then try this:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e.id){
case 'bo1s':
e.style.display = 'block';
document.getElementById('bo3s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo3s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo5s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo3s').style.display = 'none';
break;
}
}
</script>
Related
I have a inline element. I am trying to hide and show it using button. But when I click document.getElementById('').style.display = 'inline'; I'm getting block elements. How to get the element inline as it was set before.
my code looks like;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#mydata{
display:none;
font-size: 25;
}
.chartCard {
width: 100vw;
height: calc(90vh - 100px);
background: rgb(133, 43, 43);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 650px;
padding: 8px;
border-radius: 20px;
margin: 1px 22px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
.button:hover{
background-color: #005201;
color: rgb(255, 253, 250);;
}
.button {
background-color: rgb(69, 9, 188);
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 2px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
</style>
<script>
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'inline';
}
}
</script>
</head>
<body>
<button class="button" onclick="changedata(1)">Myreport</button>
<button class="button" onclick="changedata(0)">Mydata</button>
<div id="mydata">
<h1>This is my Report</h1>
</div>
<div class="chartCard" id="myreport">
<div class="chartBox">
<p>Ram</p>
</div>
<div class="chartBox">
<p>Shyam</p>
</div>
</div>
</body>
</html>
So, as you can see as I click button, inline element are getting converted to block element. how to resolve it. looking for your help. Thanks in advance
Update your function to set display to flex for myreport, initially you have set display:flex for .chartCard
function changedata(parameter) {
if (parameter == 0) {
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
} else {
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
fiddle here: https://jsfiddle.net/fhps08re/
You are using display:flex so you have to set it back.
Also, you don't need js to hide or show your sections, you can use :target.
.menu{
display:flex;
}
a{
margin-right:20px;
}
.section{
padding:20px;
width:fit-content;
border: 1px solid black;
display:none;
}
.section:target{
display:block;
}
<div class="menu">
go to A
go to B
go to C
</div>
<br>
<div id="a" class="section">Section A</div>
<div id="b" class="section">Section B</div>
<div id="c" class="section">Section C</div>
when you click on button, your 'myreport' element get display: 'inline'. it's work correct. because your elements with 'chartBox' class is div and div has display: block in its default css, the elements shows in two line.
use this to correct :
when you click the button, instead of set display to inline, set display to flex. as you do this in your css.
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
or you can use span instead of div with class: 'chartBox'
I just need some help with this small header of my project. I decided to include all the header files so you can run it in snippet and check for yourself what is happening. The only thing that I have having problem with is my JS file. If you run the file, you would get a menu bar and a shopping cart on top, I designed them to not open up at the same time hence the if else statements. Now the problem is after the web page loads, I cannot open the menu bar right away no matter how many times I click it. But, if I try to click the shopping cart, it would require two clicks before it drops down and works. But here's the weird part, after the shopping cart has dropped down, the menu bar would now work. After this occurrence, everything works the way they are intended to work. A little help please, I am currently stuck on this one. Thanks!
var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');
showShoppingBtn.addEventListener('click', ()=>{
if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
showShopping.style.display = 'block';
}
else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
showMenu.style.display = 'none';
showShopping.style.display = 'block';
}
else {
showShopping.style.display = 'none';
}
});
var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');
menuBtn.addEventListener('click', ()=>{
if(showMenu.style.display == 'none' && showShopping.style.display == 'none'){
showMenu.style.display = 'block';
} else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
showShopping.style.display = 'none';
showMenu.style.display = 'block';
} else {
showMenu.style.display = 'none';
}
});
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap");
body {
font-family: "Montserrat", sans-serif;
margin:0;
padding: 0;
}
.top-content{
background: orange;
display: flex;
}
.shopping-menu{
width: 100%;
}
#shopping-cart{
font-size: 2.5em;
cursor: pointer;
padding-right: 0;
float: right;
margin-right: 1em;
}
.top ul{
margin-top: 3em;
list-style: none;
margin-right: 1em;
}
.top li{
padding-right: 1.2em;
margin-bottom: .5em;
text-align: right;
text-transform: uppercase;
}
.top-content-container{
width: 100%;
}
.top-dropdown{
display: none;
}
.site-logo img{
position: absolute;
width: 100vw;
display: none;
}
.bottom{
background-color:#0e1338;
color: white;
display: flex;
position: relative;
}
.menu{
padding-right: 1em;
width: 100%;
}
.menu-button{
float: right;
cursor: pointer;
padding-right: 1em;
}
.bottom-content-container{
margin-left: auto;
margin-right: 0;
text-align: right;
padding-right: 1em;
}
.bottom-content-container ul{
list-style: none;
}
.menu-bar{
width: 3em;
height: .5em;
background-color: white;
margin: .5em 0;
}
.bottom-dropdown{
display: none;
margin-top: 4em;
text-align: right;
}
.bottom-dropdown li{
margin: .7em 0;
text-transform: uppercase;
}
.top li a{
color: black;
text-decoration: none;
}
.bottom li a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles/header.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<section class="top">
<div class="top-content">
<nav class="shopping-menu">
<i class="fa fa-shopping-cart" id="shopping-cart"></i>
<div class="top-content-container">
<div class="top-dropdown" id="top-dropdown">
<ul>
<li>Cart</li>
<li>Checkout</li>
<li>My Purchases</li>
</ul>
</div>
</nav>
</div>
</div>
</section>
<section class="bottom">
<div class="site-logo">
<img src="images/AutoNation-logo.png" alt="AutoNation Logo">
</div>
<nav class="menu">
<div class="menu-button" id="menu-button">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</div>
<div class="bottom-content-container">
<ul>
<div class="bottom-dropdown" id="bottom-dropdown">
<li>Services</li>
<li>Special Offers</li>
<li>Browse</li>
<li>Contact</li>
<li>Location</li>
<li>My Account</li>
</div>
</ul>
</nav>
</div>
</section>
<script src="scripts/header.js"></script>
</body>
</html>
It's because first time you entered the click function both style.display are not filled. so the condition
showShopping.style.display == 'none' && showMenu.style.display == 'none'
will not be evaluate
one quick solution to use your code is to initialize style.display at the end of the js part
showShopping.style.display = 'none';
showMenu.style.display = 'none'
When you do element.style.someStyle, you access only the inline style of the element. So the first time you click on showShoppingBtn it will pass in the last else -> setting the inline style of it to display: none.
A quick fix to that would be to add inline style directly in the html. like so :
<div class="top-dropdown" id="top-dropdown" style="display: <The defautl display you want>;">
And
<i class="fa fa-shopping-cart" id="shopping-cart" style="display: <The default display you want>;"></i>
Your HTML is invalid
You really should toggle a class. Add class hide to the menus and have .hide {display:none}
Then you can do
showShoppingBtn.addEventListener('click', () => {
showMenu.classList.add("hide")
showShopping.classList.toggle("hide")
});
menuBtn.addEventListener('click', () => {
showShopping.classList.add("hide")
showMenu.classList.toggle("hide")
});
i have a simple function
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display === "block") {
e.style.display = "none";
}
}
but for some reason, when i call the function, i get an error that says that i cant know what style null is. i want the x button to close the "window" when clicked, but it wont to do that.
css:
body{
background-color: black;
font-family: 'arial';
}
.draggable {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
size: 100%
}
.title {
z-index: 9;
background-color: #f1f1f1;
}
p{
text-align: left;
margin: 2px;
margin-left: 5px;
}
button{
margin-right: 5px;
}
html:
<div id="div1" class="draggable">
<div class="title">
<p><button onclick="myFunction('div1');">X</button>timer</p>
</div>
<iframe src="timer.html" title="description" height="620px" width="1300px"></iframe>
</div>
<div id="div2" class="draggable">
<div class="title">
<p><button onclick="myFunction('div2');">X</button>tetris</p>
</div>
<iframe src="games/tetris.html" title="description" height="650px" width="340"></iframe>
</div>
js
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display === "block") {
e.style.display = "none";
}
}
You have to set the initial value of style.display in your divs, try this:
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display == "block") {
e.style.display = "none";
}
}
<input type=text id="input" style="display: block">
<button onclick="myFunction('input')">Click!</button>
i have two DIV named[DIV1,DIv2] inside my page , where i can hide and un-hide each one of them, now is it possible when page will load automatically DIV1 will show then Div2 will hide and when you click the button to show DIV2 then automatically DIV1 will hide. i have provided example below..
function myFunction1() {
var x = document.getElementById("myDIV1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
</body>
</html>
An ideal approach would be to create a class (hidden as in the example below) which hides a particular element. Assign this class initially to second div so that it doesn't appear when page loads.
Then you can add/remove this class on particular elements when the function runs, as desired.
See the demo below:
function myFunction1() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
x.classList.remove('hidden');
y.classList.add('hidden');
}
function myFunction2() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
y.classList.remove('hidden');
x.classList.add('hidden');
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
.hidden {
display: none;
}
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2" class="hidden">
This is Second Div.
</div>
Now at least one div will be there on the screen.
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
function myFunction1() {
x.style.display = "block";
y.style.display = "none";
}
function myFunction2() {
y.style.display = "block";
x.style.display = "none";
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
display:none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<button onclick="toggleDisplay()">Div1</button>
<button onclick="toggleDisplay()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
<script>
function toggleDisplay() {
var div1 = document.getElementById("myDIV1");
var div2 = document.getElementById("myDIV2");
if (div1.style.display === "none") {
div1.style.display = "block";
div2.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
}
}
</script>
</body>
</html>
you can have one function to handle this though :-)
toggling block and none for display css
If you are using bootstrap4 then there is already 'd-none' class. you can use that. check below snippet.
function myFunction1() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
x.classList.remove("d-none");
y.classList.add("d-none");
}
function myFunction2() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
y.classList.remove("d-none");
x.classList.add("d-none");
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div class="d-none" id="myDIV2">
This is Second Div.
</div>
</body>
</html>
I'm having trouble moving my JavaScript output (start) from the black box into the grey box. I'm not entirely sure what to put into the functions (moveRight and moveLeft) to get the output to move from one to another.
I've tried searching up a solution but was not able to find one. I'm sure there is a nicer way to present this code but I'm still currently learning the basics. 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>
This code makes the buttons swap the value between the black and gray boxes
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>