Function is raising an error with the wrong value or text

Question

Function is raising an error with the wrong value or text

I am currently testing a form that I am in the process of developing. My goal is to have different values returned each time I click on a different item from the dropdown menu. If this explanation isn't clear, please take a quick look at my pen for clarification here

var val1 = $("#box1 p:first-child").text()
var val2 = $("#box2 p:first-child").text()

$("#box1").click(function(){
    $("#dropdown2").removeClass('appear')
    $("#dropdown1").toggleClass('appear')  
})

$("#dropdown1 ul li a").click(function(){
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());
    alert(val1)
})

Every time I click on Placeholder 1, 2, or 3, they all just display "Placeholder" instead of their full text. For instance, clicking on "Placeholder 1" should show "Placeholder 1" and not just "Placeholder."

I would greatly appreciate any assistance as I am completely stuck.

javascript jquery html css

Answer 1

Answer №1

When the page loads, you're defining val1 as $("#box1 p:first-child").text(), then changing the contents of #box1 p:first-child. If you want to alert with the new contents of $("#box1 p:first-child").text(), you need to re-define that variable.

I've relocated val1 into your click handler, after changing its contents with $.text(), since that was the only place where that variable was referenced.

$(document).ready(function() {
  var val2 = $("#box2 p:first-child").text();

  $("#box1").click(function() {
    $("#dropdown2").removeClass("appear");
    $("#dropdown1").toggleClass("appear");
  });

  $("#dropdown1 ul li a").click(function() {
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());

    var val1 = $("#box1 p:first-child").text();

    alert(val1);

    // switch (val1) {
    //   case "Placeholder 1":
    //     alert("test");
    //   case "Placeholder 2":
    //   alert("test2");
    //     break;
    //   default:
    //     alert("test3");
    //   }
  });

  $("#box2").click(function() {
    $("#dropdown1").removeClass("appear");
    $("#dropdown2").toggleClass("appear");
  });

  $("#dropdown2 ul li a").click(function() {
    $("#box2 p:first-child").text($(this).text());
    $("#box2 p:first-child").val($(this).text());
  });
});

* {
  margin: 0;
  padding: 0;
}

/* containers */

#wrapper {

  height: 560px;
  width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#container {

  width: 100%;
  height: 100%;
  position: relative;
}

/* rows */

#row1, #row2, #row3 {
  background: #000;
  width: 100%;
  height: 80px;
  position: absolute;
  top: 80px;
}

#row2 {
  top: 240px;
  z-index: -1;
}

#row3 {
  top: 400px;
}



/* box containers */

.box-wrapper {
  background: blue;
  width: 80%;
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}




/* boxes */

#box1, #box2 {
  background: #333;
  width: 45%;
  height: 100%;
  position: absolute;
  text-align: left;
  cursor: pointer;
}

#box2 {
  right: 0;
}

#box3, #box4, #box5 {
  background: #333;
  width: 30%;
  height: 100%;
  position: absolute;
}

#box4 {
  left: 50%;
  transform: translateX(-50%);
}

#box5 {
  right: 0;
}

#box6, #box7 {
  background: #333;
  width: 45%;
  height: 100%;
  position: absolute;
  text-align: left;
  cursor: pointer;
}

#box7 {
  right: 0;
}



/* box text */

#box1 p, #box2 p, #box3 p, #box4 p, #box5 p, #box6 p, #box7 p {
  font-size: 40px;
  line-height: 80px;
  padding-left: 10px;
}



/* dropdown */

#dropdown1, #dropdown2 {
  background: #000;
  height: 150px;
  width: 100%;
  position: absolute;
  top: 80px;
  z-index: 2;
  display: none;
}

#dropdown1 ul, #dropdown2 ul {
  background: yellow;
  height: 100%;
}

#dropdown1 ul li, #dropdown2 ul li {
  list-style: none;
}

#dropdown1 ul li a, #dropdown2 ul li a {
  padding-left: 10px;
  font-size: 30px;
  text-decoration: none;
  color: #000;
}



/* show dropdown */

.appear {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="container">
    
    <div id="row1">
      <div class="box-wrapper">
        <div id="box1">
          <p>Placeholder</p>
          <div id="dropdown1" class="dropdown">
            <ul>
              <li><a href="#">Placeholder 1</a></li>
              <li><a href="#">Placeholder 2</a></li>
              <li><a href="#">Placeholder 3</a></li>
            </ul>
          </div>
        </div>

        <div id="box2">
          <p>Placeholder</p>
          <div id="dropdown2" class="dropdown">
            <ul>
              <li><a href="#">Placeholder 1</a></li>
              <li><a href="#">Placeholder 2</a></li>
              <li><a href="#">Placeholder 3</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <div id="row2">
      <div class="box-wrapper">
        <div id="box3">
          <p>Placeholder</p>
        </div>

        <div id="box4">
          <p>Placeholder</p>
        </div>
        
        <div id="box5">
          <p>Placeholder</p>
        </div>
      </div>
    </div>
    
    <div id="row3">
      <div class="box-wrapper">
        <div id="box6">
          <p>Placeholder</p>
        </div>

        <div id="box7">
          <p>Placeholder</p>
      </div>
    </div>
    </div>
  </div>
</div>

Answer 2

When the page loads, you're defining val1 as $("#box1 p:first-child").text(), then changing the contents of #box1 p:first-child. If you want to alert with the new contents of $("#box1 p:first-child").text(), you need to re-define that variable.

I've relocated val1 into your click handler, after changing its contents with $.text(), since that was the only place where that variable was referenced.

$(document).ready(function() {
  var val2 = $("#box2 p:first-child").text();

  $("#box1").click(function() {
    $("#dropdown2").removeClass("appear");
    $("#dropdown1").toggleClass("appear");
  });

  $("#dropdown1 ul li a").click(function() {
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());

    var val1 = $("#box1 p:first-child").text();

    alert(val1);

    // switch (val1) {
    //   case "Placeholder 1":
    //     alert("test");
    //   case "Placeholder 2":
    //   alert("test2");
    //     break;
    //   default:
    //     alert("test3");
    //   }
  });

  $("#box2").click(function() {
    $("#dropdown1").removeClass("appear");
    $("#dropdown2").toggleClass("appear");
  });

  $("#dropdown2 ul li a").click(function() {
    $("#box2 p:first-child").text($(this).text());
    $("#box2 p:first-child").val($(this).text());
  });
});

* {
  margin: 0;
  padding: 0;
}

/* containers */

#wrapper {

  height: 560px;
  width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#container {

  width: 100%;
  height: 100%;
  position: relative;
}

/* rows */

#row1, #row2, #row3 {
  background: #000;
  width: 100%;
  height: 80px;
  position: absolute;
  top: 80px;
}

#row2 {
  top: 240px;
  z-index: -1;
}

#row3 {
  top: 400px;
}



/* box containers */

.box-wrapper {
  background: blue;
  width: 80%;
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}




/* boxes */

#box1, #box2 {
  background: #333;
  width: 45%;
  height: 100%;
  position: absolute;
  text-align: left;
  cursor: pointer;
}

#box2 {
  right: 0;
}

#box3, #box4, #box5 {
  background: #333;
  width: 30%;
  height: 100%;
  position: absolute;
}

#box4 {
  left: 50%;
  transform: translateX(-50%);
}

#box5 {
  right: 0;
}

#box6, #box7 {
  background: #333;
  width: 45%;
  height: 100%;
  position: absolute;
  text-align: left;
  cursor: pointer;
}

#box7 {
  right: 0;
}



/* box text */

#box1 p, #box2 p, #box3 p, #box4 p, #box5 p, #box6 p, #box7 p {
  font-size: 40px;
  line-height: 80px;
  padding-left: 10px;
}



/* dropdown */

#dropdown1, #dropdown2 {
  background: #000;
  height: 150px;
  width: 100%;
  position: absolute;
  top: 80px;
  z-index: 2;
  display: none;
}

#dropdown1 ul, #dropdown2 ul {
  background: yellow;
  height: 100%;
}

#dropdown1 ul li, #dropdown2 ul li {
  list-style: none;
}

#dropdown1 ul li a, #dropdown2 ul li a {
  padding-left: 10px;
  font-size: 30px;
  text-decoration: none;
  color: #000;
}



/* show dropdown */

.appear {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="container">
    
    <div id="row1">
      <div class="box-wrapper">
        <div id="box1">
          <p>Placeholder</p>
          <div id="dropdown1" class="dropdown">
            <ul>
              <li><a href="#">Placeholder 1</a></li>
              <li><a href="#">Placeholder 2</a></li>
              <li><a href="#">Placeholder 3</a></li>
            </ul>
          </div>
        </div>

        <div id="box2">
          <p>Placeholder</p>
          <div id="dropdown2" class="dropdown">
            <ul>
              <li><a href="#">Placeholder 1</a></li>
              <li><a href="#">Placeholder 2</a></li>
              <li><a href="#">Placeholder 3</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <div id="row2">
      <div class="box-wrapper">
        <div id="box3">
          <p>Placeholder</p>
        </div>

        <div id="box4">
          <p>Placeholder</p>
        </div>
        
        <div id="box5">
          <p>Placeholder</p>
        </div>
      </div>
    </div>
    
    <div id="row3">
      <div class="box-wrapper">
        <div id="box6">
          <p>Placeholder</p>
        </div>

        <div id="box7">
          <p>Placeholder</p>
      </div>
    </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Ensure val1 is reset after the text value has been changed, and remember to conclude your lines with a semicolon for consistency.

$("#dropdown1 ul li a").click(function(){
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());

    val1 = $("#box1 p:first-child").text();

    alert(val1);
});

Answer 4

Ensure val1 is reset after the text value has been changed, and remember to conclude your lines with a semicolon for consistency.

$("#dropdown1 ul li a").click(function(){
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());

    val1 = $("#box1 p:first-child").text();

    alert(val1);
});

Function is raising an error with the wrong value or text

Answer №1

Answer №2

Similar questions

Angular input for date is showing wrong value due to timezone problem

Vue does not consistently update HTML when the reference value changes

Issues with validation preventing PHP contact form from functioning correctly

Disabling past dates in a React JS application with a React date picker

What exactly is the purpose of utilizing node js and can someone explain to me what constitutes a

implementing HtmlSpanner with an appended css stylesheet

Picking an element that has a dynamic data attribute, but also considering those with a hyphen

Tips on setting the ajax parameter contentType to "html"

Formatting text over an image

Eliminating the 'white-space' surrounding concealed images

Ways to implement a 'Delete' feature in a PHP audio tag player

Utilize CSS exclusively on the "Theme Options" page within a Wordpress website

Unable to access npm run build on localhost

Adjust the alignment of text on both ends of the HTML5 canvas

What steps should I take to address this 'key' alert?

What is the process for extracting data from latitude and longitude in order to generate a marker on Google Maps using a script

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

Navigating through Next.js for slug URLs such as site.com/username

What is the method for submitting a POST request with a JSON body that consists of only a string, without any key-value pairs included?

What is the best way to display JSON file results when clicking a button using Vue?