How to hide and display inline element using javascript-CodePudding

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  onclick="changedata(1)">Myreport</button>
    <button  onclick="changedata(0)">Mydata</button>
    <div id="mydata">
        <h1>This is my Report</h1>
    </div>
    <div  id="myreport">
        <div >
            <p>Ram</p>
        </div>
        <div >
            <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

CodePudding user response：

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/

CodePudding user response：

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 >
  <a href="#a">go to A</a>
  <a href="#b">go to B</a>
  <a href="#c">go to C</a>
</div>
<br>
<div id="a" >Section A</div>
<div id="b" >Section B</div>
<div id="c" >Section C</div>

CodePudding user response：

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'