Search code examples
javascripthtmlevent-handlinggetelementbyidnavigationbar

Add text to an input field in navigation bar by clicking text

I'm trying to add text to an input field defined in navigation bar (left) shown below.

When #2 is clicked, I want the text to be set to it's value.

<span id="example2" class="example" onclick="setExampleValue('example2')"> #2</span>

But this is not getting updated.

<html>
    <head>
        <nav class="nav">
            <ul class="nav__links">
                <li class="nav__item">
                    <a class="nav__link" href="{% url 'home' %}">Home</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link"><span style = "font-size: 1.7rem; cursor: pointer;" onclick="openNav()">Load Model</span></a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="{% url 'about' %}">About</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="{% url 'login' %}">Login</a>
                </li>
                 </ul>
        </nav>
        <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>
            Visualization
        </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
        <style>
            .graph-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }
            .main-panel {
                width: 100%;
                height: 800px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .side-panel {
                position: absolute;
                top: 0px;
                bottom: 0;
                right: -300px;
                width: 300px;
                background-color: red;
                transition: right 0.5s;
                overflow-y: auto;
                padding: 20px;
            }

            .side-panel.open {
                right: 0;
            }

            .arrow {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 0;
                height: 0;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-right: 20px solid #2196F3;
                cursor: pointer;
            }

            .arrow.open {
                transform: rotate(180deg);
            }

            {# Added Code for side bar  #}

            .sidenav {
              height: 100%;
              width: 0;
              position: fixed;
              z-index: 3;
              top: 80px;
              left: 0;
              background-color: #111;
              overflow-x: hidden;
              transition: 0.5s;
              padding-top: 60px;
            }

            .sidenav a {
              padding: 8px 8px 8px 32px;
              text-decoration: none;
              font-size: 25px;
              color: #818181;
              display: block;
              transition: 0.3s;
            }

            .sidenav a:hover {
              color: #f1f1f1;
            }

            .sidenav .closebtn {
              position: absolute;
              top: 0;
              right: 25px;
              font-size: 36px;
              margin-left: 50px;
            }

            #main {
                transition: margin-left .5s;
                padding: 16px;
            }

            .form {
                border-radius: 20px;
                box-sizing: border-box;
                height: 500px;
                padding: 20px;
                width: inherit;
                font-size: 1.8rem;
            }

            .title{
                color: #eee;
                font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
                font-size: 25px;
                font-weight: 400;
                padding-left: 15px;

            }

            .input-container {
                height: 50px;
                position: relative;
                width: 100%;
            }

            .soura {
              margin-top: 40px;
            }

            .ic2 {
              margin-top: 30px;
            }

            .input {
              background-color: #303245;
              border-radius: 12px;
              border: 0;
              box-sizing: border-box;
              color: #eee;
              font-size: 18px;
              height: 100%;
              outline: 0;
              padding: 4px 20px 0;
              width: 100%;
            }

            .cut {
              background-color: black;
              border-radius: 10px;
              height: 20px;
              left: 20px;
              position: absolute;
              top: -20px;
              transform: translateY(0);
              transition: transform 200ms;

            }

            .arrowsize-cut{
                width: 80px;
            }

            .concentration-cut{
                width: 105px;
            }

            .example-cut{
                width: 140px;
            }

            .labelsize-cut{
                width: 80px;
            }

            .input:focus ~ .cut,
            .input:not(:placeholder-shown) ~ .cut {
              transform: translateY(8px);
            }

            .placeholder {
              color: #65657b;
              font-family: sans-serif;
              left: 20px;
              line-height: 14px;
              pointer-events: none;
              position: absolute;
              transform-origin: 0 50%;
              transition: transform 200ms, color 200ms;
              top: 20px;
            }

            .input:focus ~ .placeholder,
            .input:not(:placeholder-shown) ~ .placeholder {
              transform: translateY(-30px) translateX(10px) scale(0.75);
            }

            .input:not(:placeholder-shown) ~ .placeholder {
              color: #808097;
            }

            .input:focus ~ .placeholder {
              color: #dc2f55;
            }

            .submit {
              background-color: #08d;
              border-radius: 12px;
              border: 0;
              box-sizing: border-box;
              color: #eee;
              cursor: pointer;
              font-size: 18px;
              height: 50px;
              margin-top: 38px;
              outline: 0;
              text-align: center;
              width: 100%;
            }

            .submit:active {
              background-color: #06b;
            }

            /* Adding the button */

            @media screen and (max-height: 450px) {
              .sidenav {padding-top: 15px;}
              .sidenav a {font-size: 18px;}
            }

            /* Code for download button */

            .hide {
                max-height: 0 !important;
            }

            .dropdown{
                border: 0.1em solid white;
                width: 23em;
                margin-bottom: 1em;
                margin-top: 2rem;
                position: relative;
            }

            .dropdown .title{
                margin: .3em .3em .3em .3em;
                width: 100%;
            }

            .dropdown .title .fa-angle-right{
                float: right;
                margin-right: .7em;
                transition: transform .3s;
            }

            .dropdown .menu{
                transition: bottom .5s ease-out;
                background-color: black;
                min-width: 23rem;
                bottom: 7.9em;
                border:  solid white;
                overflow: hidden;
                position: absolute;
            }

            .dropdown .menu .option{
                margin: .3em .3em .3em .3em;
                margin-top: 0.3em;
                color: white;
                font-size: 2rem;
            }

            .dropdown .menu .option:hover{
                background: rgba(0,0,0,0.2);
            }

            .pointerCursor:hover{
                cursor: pointer;
            }

            .rotate-90{
                transform: rotate(-90deg);
            }

            .clickable {
              cursor: pointer;
              text-decoration: underline;
              color: blue;
            }
        </style>

    </head>
    <body>

        <div id = "main" style="margin-left: 7rem;">

            <div id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <form class="form" id="myForm" target="_blank" method="post">
                      <div class = "title"> Load a Model</div>
                      <div class="input-container soura">
                      <input id="examples" class="input" name="examples" placeholder="example1" />
                      <div class="cut example-cut"></div>
                      <label for="examples" class="placeholder">
                          Examples
                          <span id="example1" class="example" onclick="setExampleValue('example1')"> #1</span>
                          <span id="example2" class="example" onclick="setExampleValue('example2')"> #2</span>
                          <span id="example3" class="example" onclick="setExampleValue('example3')"> #3</span>
                          <span id="example3" class="example" onclick="setExampleValue('example4')"> #4</span>
                      </label>
                      </div>

                      <button type="submit" class="submit">Submit</button>
                    </form>

                <div class='dropdown'>
                    <a class='title pointerCursor'>Download <i class="fa fa-angle-down"></i></a>
                    <div class='menu pointerCursor hide'>
                        <div class='option' id='option1'><a href="#">PNG</a></div>
                        <div class='option' id='option2'><a href="#">SVG</a></div>
                        <div class='option' id='option3'><a href="#">JPEG</a></div>
                    </div>
                </div>
            </div>

            <div class="graph-container">
                <div id="network" class="main-panel"></div>
                <div id="graph" class="side-panel">
                    <div class="arrow"></div>
                </div>
            </div>


        <script src="https://kit.fontawesome.com/adf1f3a283.js" crossorigin="anonymous"></script>
        <script>

            function openNav() {
                document.getElementById("mySidenav").style.width = "250px";
                document.getElementById("main").style.marginLeft = "250px";
            }

            function closeNav() {
                document.getElementById("mySidenav").style.width = "0";
                document.getElementById("main").style.marginLeft = "0";
            }

            // examples
            function setExampleValue(value) {
                document.getElementById("examples").value = value;
            }
        </script>

        </div>
    </body>
</html>

enter image description here

Could someone please suggest what's going wrong?

Solution

  • The pointer-events: none declaration on the parent element .placeholder means that the document does not ever consider any mouse clicks in the element or its children. Consider removing the pointer-events: none declaration so that the child <span> elements can receive click events:

    function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

// examples
function setExampleValue(value) {
  document.getElementById("examples").value = value;
}
    .graph-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.main-panel {
  width: 100%;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.side-panel {
  position: absolute;
  top: 0px;
  bottom: 0;
  right: -300px;
  width: 300px;
  background-color: red;
  transition: right 0.5s;
  overflow-y: auto;
  padding: 20px;
}

.side-panel.open {
  right: 0;
}

.arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #2196F3;
  cursor: pointer;
}

.arrow.open {
  transform: rotate(180deg);
}

{
  # Added Code for side bar #
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 80px;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.form {
  border-radius: 20px;
  box-sizing: border-box;
  height: 500px;
  padding: 20px;
  width: inherit;
  font-size: 1.8rem;
}

.title {
  color: #eee;
  font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
  font-size: 25px;
  font-weight: 400;
  padding-left: 15px;
}

.input-container {
  height: 50px;
  position: relative;
  width: 100%;
}

.soura {
  margin-top: 40px;
}

.ic2 {
  margin-top: 30px;
}

.input {
  background-color: #303245;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  font-size: 18px;
  height: 100%;
  outline: 0;
  padding: 4px 20px 0;
  width: 100%;
}

.cut {
  background-color: black;
  border-radius: 10px;
  height: 20px;
  left: 20px;
  position: absolute;
  top: -20px;
  transform: translateY(0);
  transition: transform 200ms;
}

.arrowsize-cut {
  width: 80px;
}

.concentration-cut {
  width: 105px;
}

.example-cut {
  width: 140px;
}

.labelsize-cut {
  width: 80px;
}

.input:focus~.cut,
.input:not(:placeholder-shown)~.cut {
  transform: translateY(8px);
}

.placeholder {
  color: #65657b;
  font-family: sans-serif;
  left: 20px;
  line-height: 14px;
  position: absolute;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 20px;
}

.input:focus~.placeholder,
.input:not(:placeholder-shown)~.placeholder {
  transform: translateY(-30px) translateX(10px) scale(0.75);
}

.input:not(:placeholder-shown)~.placeholder {
  color: #808097;
}

.input:focus~.placeholder {
  color: #dc2f55;
}

.submit {
  background-color: #08d;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  cursor: pointer;
  font-size: 18px;
  height: 50px;
  margin-top: 38px;
  outline: 0;
  text-align: center;
  width: 100%;
}

.submit:active {
  background-color: #06b;
}


/* Adding the button */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}


/* Code for download button */

.hide {
  max-height: 0 !important;
}

.dropdown {
  border: 0.1em solid white;
  width: 23em;
  margin-bottom: 1em;
  margin-top: 2rem;
  position: relative;
}

.dropdown .title {
  margin: .3em .3em .3em .3em;
  width: 100%;
}

.dropdown .title .fa-angle-right {
  float: right;
  margin-right: .7em;
  transition: transform .3s;
}

.dropdown .menu {
  transition: bottom .5s ease-out;
  background-color: black;
  min-width: 23rem;
  bottom: 7.9em;
  border: solid white;
  overflow: hidden;
  position: absolute;
}

.dropdown .menu .option {
  margin: .3em .3em .3em .3em;
  margin-top: 0.3em;
  color: white;
  font-size: 2rem;
}

.dropdown .menu .option:hover {
  background: rgba(0, 0, 0, 0.2);
}

.pointerCursor:hover {
  cursor: pointer;
}

.rotate-90 {
  transform: rotate(-90deg);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}
    <html>
<head>
  <nav class="nav">
    <ul class="nav__links">
      <li class="nav__item">
        <a class="nav__link" href="{% url 'home' %}">Home</a>
      </li>
      <li class="nav__item">
        <a class="nav__link"><span style = "font-size: 1.7rem; cursor: pointer;" onclick="openNav()">Load Model</span></a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="{% url 'login' %}">Login</a>
      </li>
    </ul>
  </nav>
  <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>
    Visualization
  </title>
  <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
</head>
<body>

  <div id="main" style="margin-left: 7rem;">

    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <form class="form" id="myForm" target="_blank" method="post">
        <div class="title"> Load a Model</div>
        <div class="input-container soura">
          <input id="examples" class="input" name="examples" placeholder="example1" />
          <div class="cut example-cut"></div>
          <label for="examples" class="placeholder">
                          Examples
                          <span id="example1" class="example" onclick="setExampleValue('example1')"> #1</span>
                          <span id="example2" class="example" onclick="setExampleValue('example2')"> #2</span>
                          <span id="example3" class="example" onclick="setExampleValue('example3')"> #3</span>
                          <span id="example3" class="example" onclick="setExampleValue('example4')"> #4</span>
                      </label>
        </div>

        <button type="submit" class="submit">Submit</button>
      </form>

      <div class='dropdown'>
        <a class='title pointerCursor'>Download <i class="fa fa-angle-down"></i></a>
        <div class='menu pointerCursor hide'>
          <div class='option' id='option1'><a href="#">PNG</a></div>
          <div class='option' id='option2'><a href="#">SVG</a></div>
          <div class='option' id='option3'><a href="#">JPEG</a></div>
        </div>
      </div>
    </div>

    <div class="graph-container">
      <div id="network" class="main-panel"></div>
      <div id="graph" class="side-panel">
        <div class="arrow"></div>
      </div>
    </div>

    <script src="https://kit.fontawesome.com/adf1f3a283.js" crossorigin="anonymous"></script>
  </div>
</body>
</html>