I'm a beginner and I'm having trouble with the home page of a web app. I've started a 'so-called' prototype purely in html

Tam2710
February 23, 2024
241 views
0 votes
2 Answers

The page is supposed to display a window block depending on the checked category in the sidebar. But it displays all the blocks at once regardless of what is checked. I’m not sure if I made a mistake in the js function or is it the html file.

function showContent() {
    s = document.getElementById('skills');
    i = document.getElementById('interests');
    e = document.getElementById('education');
    id1 = document.getElementById('cont1');
    id2 = document.getElementById('cont2');
    id3 = document.getElementById('cont3');

    if (s.is(":checked"))
    {
        id1.show();
        id2.hide();
        id3.hide();
    }else if (i.is(":checked")) {
        id1.hide();
        id2.show();
        id3.hide();
    } else if (i.is(":checked")) {
        id1.hide();
        id2.hide();
        id3.show();
    }else {
        id1.hide();
        id2.hide();
        id3.hide();
    }
};

*{
    padding: 10px;
    margin: 5px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background-image: url(../Prof_slike/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    text-align: center;
    color: aliceblue;
    margin-top: 0%;
}

.wrap h2{
    color:aliceblue;
}

.formbox{
    background: linear-gradient(to bottom right, black, dimgray, darkgray);
    text-align: left;
    width: 400px;
    padding: 20px;
    border-radius: 20px;
    margin: auto;
    box-shadow: 0 0 128px 0 rgba(255, 255, 255);
}

.formbox header{
    color:white;
    padding-bottom: 5px;
    border-bottom: 1px solid white;
}

.input label{
    color: white;
    text-align: left;
}

.input input{
    width:100%;
}

.submit input{
    background-color:darkorchid;
    width:100%;
}

.submit input:hover{
    color:white;
    background-color: blueviolet;
    opacity: 0.7;
}

.links a:hover{
    color:blueviolet;
}

.nav{
    overflow: hidden;
    width:100%;
    background:linear-gradient(to bottom, black, dimgray, darkgray);
    display:flex;
    flex-direction: row;
    line-height: 30px;
    text-decoration: none;
    border-radius: 10px;
}

.nav a{
    display: block;
    color: white;
    padding: 5px 5px;
    text-decoration: none;
}

.nav input[type=text]{
    float: right;
    width: 400px;
    padding: 10px;
    border: none;
    font-size: 15px;
}

.nav a:hover{
    color:white;
    opacity: 0.7;
    background-color: blueviolet;
}

.nav a.active{
    opacity: 0.5;
    color:black;
}

.btn{
    float:right;
    color:white;
    background-color: black;
}

@media screen and (max-width: 600px) {
    .btn, .nav input[type=text] {
      float: none;
      display: block;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 14px;
    }
}

.content{
    display:table;
}

.sidenav {
    float:left;
    position:fixed;
    height: 300px;
    z-index: 1;
    background:linear-gradient(to right, black, dimgray, darkgray);
    overflow-x: hidden;
    padding-top: 10px;
    text-align: right;
    border-radius: 10px;
}

.box{
    float: right;
    width: 1000px;
    height: 400px;
    background-image: url(../Prof_slike/image3.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    border-radius: 10px;
    text-align: left;
}

.box h3{
    color:white;
    font-size: 20px;
    padding:2px 2px;
}

.card{
    position:relative;
    width: 970px;
    height: 340px;
    background-color: white;
    border-radius: 5px;
    text-align: initial;
}

.card p{
    color:black;
    font-size: 12px;
}

@media screen and (max-width: 780px) {
    .box, .card, .sidenav {width: 100%;}
}

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewpoint" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style/style.css">
        <title>Home</title>
    </head>
    <body>
        <h2>Skill exchange</h2>
        <div class="nav">
            <a class="active" href="#home">Home</a>
            <a href="edit.html">Change profile</a>
            <a href="logout.html">Log out</a>
            <input type="text" placeholder="Search..."><button class="btn">Search</button>
        </div>
        <div class="content">
            <div class="sidenav">
                Skills<input type="radio" id="skills" name="choice" class="skill" onclick="showContent()" checked><br>
                Interests<input type="radio" id="interests" name="choice" class="interest" onclick="showContent()"><br>
                Education<input type="radio" id="education" name="choice" class="education" onclick="showContent()"><br>
            </div>
            <div class="box" id="cont1">
                <h3>Skills</h3>
                <div class="card" contenteditable="true">
                    <p>My skills are...</p>
                </div>
            </div>
            <div class="box" id="cont2">
                <h3>Interests</h3>
                <div class="card" contenteditable="true">
                    <p>My interests are...</p>
                </div>
            </div>
            <div class="box" id="cont3">
                <h3>Education</h3>
                <div class="card" contenteditable="true">
                    <p>My education is...</p>
                </div>
            </div>
        </div>
        <script src="constructors.js"></script>
    </body>
</html>

The result is this. It should display one window block at a time.

Tags: html javascript

Answers

There is lots of things to fix here. First add jquery then use $("#cont1").show(); and if you want to show only one element on page load then set other elements to hide

example code:

      class Administrator {
        constructor(username, email, age, password) {
          this.username = username;
          this.email = email;
          this.age = age;
          this.password = password;
        }
      }

      class User {
        constructor(username, email, password) {
          this.username = username;
          this.email = email;
          this.age = age;
          this.password = password;
        }
      }
      $("#cont1").show();
      $("#cont2").hide();
      $("#cont3").hide();
      function showContent() {
        s = document.getElementById("skills");
        i = document.getElementById("interests");
        e = document.getElementById("education");
        id1 = document.getElementById("cont1");
        id2 = document.getElementById("cont2");
        id3 = document.getElementById("cont3");

        if (s.checked) {
          $("#cont1").show();
          $("#cont2").hide();
          $("#cont3").hide();
        } else if (i.checked) {
          $("#cont1").hide();
          $("#cont2").show();
          $("#cont3").hide();
        } else if (e.checked) {
          $("#cont1").hide();
          $("#cont2").hide();
          $("#cont3").show();
        } else {
          $("#cont1").hide();
          $("#cont2").hide();
          $("#cont3").hide();
        }
      }

* {
        padding: 10px;
        margin: 5px;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
      }

      body {
        background-image: url(../Prof_slike/background.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        text-align: center;
        color: aliceblue;
        margin-top: 0%;
      }

      .wrap h2 {
        color: aliceblue;
      }

      .formbox {
        background: linear-gradient(to bottom right, black, dimgray, darkgray);
        text-align: left;
        width: 400px;
        padding: 20px;
        border-radius: 20px;
        margin: auto;
        box-shadow: 0 0 128px 0 rgba(255, 255, 255);
      }

      .formbox header {
        color: white;
        padding-bottom: 5px;
        border-bottom: 1px solid white;
      }

      .input label {
        color: white;
        text-align: left;
      }

      .input input {
        width: 100%;
      }

      .submit input {
        background-color: darkorchid;
        width: 100%;
      }

      .submit input:hover {
        color: white;
        background-color: blueviolet;
        opacity: 0.7;
      }

      .links a:hover {
        color: blueviolet;
      }

      .nav {
        overflow: hidden;
        width: 100%;
        background: linear-gradient(to bottom, black, dimgray, darkgray);
        display: flex;
        flex-direction: row;
        line-height: 30px;
        text-decoration: none;
        border-radius: 10px;
      }

      .nav a {
        display: block;
        color: white;
        padding: 5px 5px;
        text-decoration: none;
      }

      .nav input[type="text"] {
        float: right;
        width: 400px;
        padding: 10px;
        border: none;
        font-size: 15px;
      }

      .nav a:hover {
        color: white;
        opacity: 0.7;
        background-color: blueviolet;
      }

      .nav a.active {
        opacity: 0.5;
        color: black;
      }

      .btn {
        float: right;
        color: white;
        background-color: black;
      }

      @media screen and (max-width: 600px) {
        .btn,
        .nav input[type="text"] {
          float: none;
          display: block;
          text-align: left;
          width: fit-content;
          margin: 0;
          padding: 14px;
        }
      }

      .content {
        display: table;
      }

      .sidenav {
        float: left;
        position: fixed;
        height: 300px;
        z-index: 1;
        background: linear-gradient(to right, black, dimgray, darkgray);
        overflow-x: hidden;
        padding-top: 10px;
        text-align: right;
        border-radius: 10px;
      }

      .box {
        float: right;
        width: 1000px;
        height: 400px;
        background-image: url(../Prof_slike/image3.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        border-radius: 10px;
        text-align: left;
        padding-left: 100px;
      }

      .box h3 {
        color: white;
        font-size: 20px;
        padding: 2px 2px;
      }

      .card {
        position: relative;
        width: 970px;
        height: 340px;
        background-color: white;
        border-radius: 5px;
        text-align: initial;
      }

      .card p {
        color: black;
        font-size: 12px;
      }

      @media screen and (max-width: 780px) {
        .box,
        .card,
        .sidenav {
          width: fit-content;
        }
      }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <h2>Skill exchange</h2>
    <div class="nav">
      <a class="active" href="#home">Home</a>
      <a href="edit.html">Change profile</a>
      <a href="logout.html">Log out</a>
      <input type="text" placeholder="Search..." /><button class="btn">Search</button>
    </div>
    <div class="content">
      <div class="sidenav">
        Skills<input type="radio" id="skills" name="choice" class="skill" onclick="showContent()" checked /><br />
        Interests<input type="radio" id="interests" name="choice" class="interest" onclick="showContent()" /><br />
        Education<input type="radio" id="education" name="choice" class="education" onclick="showContent()" /><br />
      </div>
      <div class="box" id="cont1">
        <h3>Skills</h3>
        <div class="card" contenteditable="true">
          <p>My skills are...</p>
        </div>
      </div>
      <div class="box" id="cont2">
        <h3>Interests</h3>
        <div class="card" contenteditable="true">
          <p>My interests are...</p>
        </div>
      </div>
      <div class="box" id="cont3">
        <h3>Education</h3>
        <div class="card" contenteditable="true">
          <p>My education is...</p>
        </div>
      </div>
    </div>

I simplified your code so it only show-cases your problem.

Never use float unless you know what you’re doing.
Never assign width or height to an element unless you know what
you’re doing. Use max-width and max-height instead.
Always use const or let to declare variables.
Use the correct semantic for the tags.
Use understandable variable names and classes that actually describes what they are used for.
Use loops when you have several elements that needs to change.

I used a CSS variable to control the spacing on all elements.

I added a label and inputs that uses the same name so they are all connected.

I added event listeners to all inputs that listens to the ‘change’ event.

I renamed the box ids to match the input ids so it’s easier to use the input id and add -info to find the id for the corresponding .box.

You can use the hidden attribute that almost all elements have. Hide all elements, then show the element that you want to display.

document.querySelectorAll('.sidenav input').forEach(input => {
  input.addEventListener('change', showContent);
})

function showContent({target}) {
  document.querySelectorAll('section > .box').forEach(infoBox => {
    infoBox.hidden = true;
  })
  
  const boxToDisplay = document.getElementById(target.id + '-info');
  
  if (boxToDisplay) {
     boxToDisplay.hidden = false;
  }
};

showContent({target: document.querySelector('.sidenav input[checked]')})

* {
  box-sizing: border-box;
}

:root {
  --spacing: 1rem;
  --spacing-quarter: 0.25rem;
}

html, body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: var(--spacing);
  background: darkblue;
}

input, label {
  cursor: pointer;
}

label {
  color: white;
  text-align: left;
}

.links a:hover {
  color: blueviolet;
}

main {
  display: flex;
}

section {
  flex: 1 1 auto;
}

.sidenav {
  background: linear-gradient(to right, black, dimgray, darkgray);
  padding: var(--spacing);
  text-align: right;
  border-radius: 10px;
  max-width: 200px;
}

.sidenav > div {
  padding: var(--spacing-quarter) 0px;
}

.box {
  background-image: url(../Prof_slike/image3.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  border-radius: 10px;
  padding: var(--spacing);
}

.box h3 {
  color: white;
  font-size: 20px;
  padding: 2px;
  margin: 0px;
}

.card {
  min-height: 340px;
  background-color: white;
  border-radius: 5px;
  text-align: initial;
}

.card p {
  color: black;
  font-size: 12px;
  padding: var(--spacing);
}

<main>
  <div class="sidenav">
    <div>
      <label for="skills">Skills</label>
      <input type="radio" name="navselector" checked id="skills" />
    </div>

    <div>
      <label for="interests">Interests</label>
      <input type="radio" name="navselector" id="interests" />
    </div>

    <div>
      <label for="education">Education</label>
      <input type="radio" name="navselector" id="education" />
    </div>
  </div>
  
  <section>
    <div class="box" id="skills-info">
      <h3>Skills</h3>
      <div class="card" contenteditable="true">
        <p>My skills are...</p>
      </div>
    </div>
    
    <div class="box" id="interests-info">
      <h3>Interests</h3>
      <div class="card" contenteditable="true">
        <p>My interests are...</p>
      </div>
    </div>
    
    <div class="box" id="education-info">
      <h3>Education</h3>
      <div class="card" contenteditable="true">
        <p>My education is...</p>
      </div>
    </div>
  </section>

</main>

Please signup or login to give your own answer.

Click here to cancel reply.