I'm having trouble getting my JavaScript to function properly. It recognizes the ID, but for some reason, it is not implementing the display changes

Question

I'm having trouble getting my JavaScript to function properly. It recognizes the ID, but for some reason, it is not implementing the display changes

I understand the importance of learning jQuery, but I prefer to delve into raw JavaScript first. Can someone assist me without the use of jQuery for better understanding? Thank you!

Hello, I'm fairly new to JavaScript and have recently started my learning journey. The navigation code that I've included below is functional, so I'll leave it untouched.

However, I'm facing an issue with the second block of code. I've been exploring event listeners and other concepts through online videos, and while everything seems to make sense to me, I'm still unable to achieve the desired outcome!

My goal is to display the div with the id "cs" when CSS is clicked, and similarly for HTML and JavaScript.

Unfortunately, I lack sufficient knowledge in JavaScript to troubleshoot this on my own. I'm completely stuck and unsure how to resolve the problem!

If anyone could provide assistance, I would greatly appreciate it. My frustration is mounting, and I can't seem to figure it out before bedtime!

Below is the code snippet, along with a link to the JS Fiddle: https://jsfiddle.net/pmj26o9p/2/

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

htm.addEventListener("click", contentShow);
css.addEventListener("click", contentShow);
js.addEventListener("click", contentShow);

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

switcheroo.onclick = function() {

  if (switcheroo.style.display === "none") {
    switcheroo.style.display = "";
  } else {
    switcheroo.style.display = "none";
  }

}

EDIT: Upon reviewing the code again, I realize that even if it functions properly, it won't achieve what I intended. This will allow me to show/hide the clicked element, correct?

Instead, I aim to display the selected item while hiding/applying display:none to all others that remain unclicked.

javascript html css

Answer 1

Answer №1

Here is an example below that demonstrates how the selected block is shown while the others are hidden, in alignment with your EDIT comment.

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

function contentShow(el) {
  var whichOne = el.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

  // display the selected block and hide the others
  switch (switcheroo) {
    case htm:
      htm.style.display = "block";
      css.style.display = "none";
      js.style.display = "none";
      break;
    case js:
      htm.style.display = "none";
      css.style.display = "none";
      js.style.display = "block";
      break;
    case css:
      htm.style.display = "none";
      css.style.display = "block";
      js.style.display = "none";
      break;
  }
}

<span data-id="htm" onClick="contentShow(this)" style="margin-right:10px;color:red; cursor:pointer">Click to show the HTML Block</span>
<span data-id="css" onClick="contentShow(this)" style="margin-right:10px;color:green; cursor:pointer">Click to show the CSS Block</span>
<span data-id="js" onClick="contentShow(this)" style="margin-right:10px;color:blue; cursor:pointer">Click to show the JS Block</span>
<br/>
<br/>
<div id="htm">Some HTML info here</div>
<div id="css" style="display:none">Some CSS info here</div>
<div id="js" style="display:none">Some JavaScript info here</div>

Answer 2

Here is an example below that demonstrates how the selected block is shown while the others are hidden, in alignment with your EDIT comment.

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

function contentShow(el) {
  var whichOne = el.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

  // display the selected block and hide the others
  switch (switcheroo) {
    case htm:
      htm.style.display = "block";
      css.style.display = "none";
      js.style.display = "none";
      break;
    case js:
      htm.style.display = "none";
      css.style.display = "none";
      js.style.display = "block";
      break;
    case css:
      htm.style.display = "none";
      css.style.display = "block";
      js.style.display = "none";
      break;
  }
}

<span data-id="htm" onClick="contentShow(this)" style="margin-right:10px;color:red; cursor:pointer">Click to show the HTML Block</span>
<span data-id="css" onClick="contentShow(this)" style="margin-right:10px;color:green; cursor:pointer">Click to show the CSS Block</span>
<span data-id="js" onClick="contentShow(this)" style="margin-right:10px;color:blue; cursor:pointer">Click to show the JS Block</span>
<br/>
<br/>
<div id="htm">Some HTML info here</div>
<div id="css" style="display:none">Some CSS info here</div>
<div id="js" style="display:none">Some JavaScript info here</div>

Answer 3

Answer №2

When you attach a second event handler to the switcheroo element and the click event is not triggered, nothing will happen.

To create a toggle function for the switcheroo variable, follow these steps instead:

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);
  return toggleDisplay(switcheroo);
}

function toggleDisplay(elem) {
  if (elem.style.display === "none") {
    elem.style.display = "";
  } else {
    elem.style.display = "none";
  }
}

Answer 4

When you attach a second event handler to the switcheroo element and the click event is not triggered, nothing will happen.

To create a toggle function for the switcheroo variable, follow these steps instead:

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);
  return toggleDisplay(switcheroo);
}

function toggleDisplay(elem) {
  if (elem.style.display === "none") {
    elem.style.display = "";
  } else {
    elem.style.display = "none";
  }
}

Answer 5

Answer №3

Disregarding your current inefficient practices, let's modify

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

htm.addEventListener("click", contentShow);
css.addEventListener("click", contentShow);
js.addEventListener("click", contentShow);

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

switcheroo.onclick = function() {

  if (switcheroo.style.display === "none") {
    switcheroo.style.display = "";
  } else {
    switcheroo.style.display = "none";
  }

}

into something like:

var doc = document;
function E(id){
  return doc.getElementById(id); // you guessed it - same as document.getElementById, without typing it every time
}
var htm = E('htm'), css = E('css'), js = E('js');
contentShow = (function(){ // self-executing scopes off var showing - variable style assignment requires function definition before execution
  var showing = false;
  return function(){ // returns unexecuted function
    var ht = E('ht').style, cs = E('cs').style, jsc = E('jsc').style;
    if(showing){
      ht.display = cs.display = jsc.display = 'none'; showing = false;
    }
    else{
      ht.display = cs.display = jsc.display = 'block'; showing = true;
    }
  }
})();
htm.addEventListener('click', contentShow);
css.addEventListener('click', contentShow);
js.addEventListener('click', contentShow);

Check out the updated JSFiddle here.

If there are no other click Events on those Elements, you could even update

htm.addEventListener('click', contentShow);
css.addEventListener('click', contentShow);
js.addEventListener('click', contentShow);

to

htm.onclick = css.onclick = js.onclick = contentShow;

Find the revised JSFiddle here

However, note that this method overrides previous Events of the same type.

Answer 6

Disregarding your current inefficient practices, let's modify

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

htm.addEventListener("click", contentShow);
css.addEventListener("click", contentShow);
js.addEventListener("click", contentShow);

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

switcheroo.onclick = function() {

  if (switcheroo.style.display === "none") {
    switcheroo.style.display = "";
  } else {
    switcheroo.style.display = "none";
  }

}

into something like:

var doc = document;
function E(id){
  return doc.getElementById(id); // you guessed it - same as document.getElementById, without typing it every time
}
var htm = E('htm'), css = E('css'), js = E('js');
contentShow = (function(){ // self-executing scopes off var showing - variable style assignment requires function definition before execution
  var showing = false;
  return function(){ // returns unexecuted function
    var ht = E('ht').style, cs = E('cs').style, jsc = E('jsc').style;
    if(showing){
      ht.display = cs.display = jsc.display = 'none'; showing = false;
    }
    else{
      ht.display = cs.display = jsc.display = 'block'; showing = true;
    }
  }
})();
htm.addEventListener('click', contentShow);
css.addEventListener('click', contentShow);
js.addEventListener('click', contentShow);

Check out the updated JSFiddle here.

If there are no other click Events on those Elements, you could even update

htm.addEventListener('click', contentShow);
css.addEventListener('click', contentShow);
js.addEventListener('click', contentShow);

to

htm.onclick = css.onclick = js.onclick = contentShow;

Find the revised JSFiddle here

However, note that this method overrides previous Events of the same type.

Answer 7

Answer №4

Here is a modification of the solution provided by @K Scandrett that enhances scalability and flexibility:

var navItems = document.getElementsByClassName("nav");

//Add Event Listeners
for(var j = 0; j < navItems.length; j ++)
{
    navItems[j].addEventListener('click', showContent, false);    
}

function showContent(elem) {
  var selected = elem.target.attributes["data-id"].value;
  var targetElement = document.getElementById(selected);

  for(var k = 0; k < navItems.length; k ++)
  {
    var contentBlock = document.getElementById(navItems[k].attributes["data-id"].value)
    contentBlock.style.display = contentBlock === targetElement ? "block" : "none";      
  }
}

<span data-id="htm" style="margin-right:10px;color:red; cursor:pointer" class="nav">Click to display HTML Block</span>
<span data-id="css"  style="margin-right:10px;color:green; cursor:pointer" class="nav">Click to show CSS Block</span>
<span data-id="js"  style="margin-right:10px;color:blue; cursor:pointer" class="nav">Click to show JS Block</span>
<br/>
<br/>
<div id="htm">Some information about HTML here</div>
<div id="css" style="display:none">Information regarding CSS shown here</div>
<div id="js" style="display:none">Details about JavaScript content displayed here</div>

Answer 8

Here is a modification of the solution provided by @K Scandrett that enhances scalability and flexibility:

var navItems = document.getElementsByClassName("nav");

//Add Event Listeners
for(var j = 0; j < navItems.length; j ++)
{
    navItems[j].addEventListener('click', showContent, false);    
}

function showContent(elem) {
  var selected = elem.target.attributes["data-id"].value;
  var targetElement = document.getElementById(selected);

  for(var k = 0; k < navItems.length; k ++)
  {
    var contentBlock = document.getElementById(navItems[k].attributes["data-id"].value)
    contentBlock.style.display = contentBlock === targetElement ? "block" : "none";      
  }
}

<span data-id="htm" style="margin-right:10px;color:red; cursor:pointer" class="nav">Click to display HTML Block</span>
<span data-id="css"  style="margin-right:10px;color:green; cursor:pointer" class="nav">Click to show CSS Block</span>
<span data-id="js"  style="margin-right:10px;color:blue; cursor:pointer" class="nav">Click to show JS Block</span>
<br/>
<br/>
<div id="htm">Some information about HTML here</div>
<div id="css" style="display:none">Information regarding CSS shown here</div>
<div id="js" style="display:none">Details about JavaScript content displayed here</div>

Answer 9

Answer №5

Are you searching for a JavaScript solution? It's great that you want to grasp JavaScript before delving into jQuery. However, here's an unconventional approach for you - solely using HTML and CSS.

.info {display:none;}
.info:target{display:block;}

<a href="#htm" style="margin-right:10px;color:red;">Click to show the HTML Block</a>
<a href="#css" style="margin-right:10px;color:green;">Click to show the CSS Block</a>
<a href="#js"  style="margin-right:10px;color:blue;">Click to show the JS Block</a>
<br/>
<br/>
<div id="htm" class="info">Some HTML info here</div>
<div id="css" class="info">Some CSS info here</div>
<div id="js"  class="info">Some JavaScript info here</div>

I've utilized internal page ID links and the :target selector. This method is more semantically sound and can be further enhanced through scripting without compromising semantics. Additionally, users have the advantage of bookmarking selections with this option.

CSS OPTION 2

This alternative accomplishes the initial display by employing absolute positioning, z-indexes, and background colors to conceal the original content.

.info {position:relative;}
.info > div {
  position:absolute;
  top:0;
  left:0;
  background-color:#FFF;
  z-index:10;
  display: none;
}

#htm
{
  display:block;
  z-index:1;
}

.info > div:target {
  display: block;
}

<a href="#htm" style="margin-right:10px;color:red;">Click to show the HTML Block</a>
<a href="#css" style="margin-right:10px;color:green;">Click to show the CSS Block</a>
<a href="#js" style="margin-right:10px;color:blue;">Click to show the JS Block</a>
<br/>
<br/>
<div class="info">
  <div id="htm">Some HTML info here</div>
  <div id="css">Some CSS info here</div>
  <div id="js">Some JavaScript info here</div>
</div>

Consider manipulating CSS classes with JavaScript for adding/removing them instead of directly changing the display property. This enables the use of CSS transitions, enhancing user experience.

Answer 10

Are you searching for a JavaScript solution? It's great that you want to grasp JavaScript before delving into jQuery. However, here's an unconventional approach for you - solely using HTML and CSS.

.info {display:none;}
.info:target{display:block;}

<a href="#htm" style="margin-right:10px;color:red;">Click to show the HTML Block</a>
<a href="#css" style="margin-right:10px;color:green;">Click to show the CSS Block</a>
<a href="#js"  style="margin-right:10px;color:blue;">Click to show the JS Block</a>
<br/>
<br/>
<div id="htm" class="info">Some HTML info here</div>
<div id="css" class="info">Some CSS info here</div>
<div id="js"  class="info">Some JavaScript info here</div>

I've utilized internal page ID links and the :target selector. This method is more semantically sound and can be further enhanced through scripting without compromising semantics. Additionally, users have the advantage of bookmarking selections with this option.

CSS OPTION 2

This alternative accomplishes the initial display by employing absolute positioning, z-indexes, and background colors to conceal the original content.

.info {position:relative;}
.info > div {
  position:absolute;
  top:0;
  left:0;
  background-color:#FFF;
  z-index:10;
  display: none;
}

#htm
{
  display:block;
  z-index:1;
}

.info > div:target {
  display: block;
}

<a href="#htm" style="margin-right:10px;color:red;">Click to show the HTML Block</a>
<a href="#css" style="margin-right:10px;color:green;">Click to show the CSS Block</a>
<a href="#js" style="margin-right:10px;color:blue;">Click to show the JS Block</a>
<br/>
<br/>
<div class="info">
  <div id="htm">Some HTML info here</div>
  <div id="css">Some CSS info here</div>
  <div id="js">Some JavaScript info here</div>
</div>

Consider manipulating CSS classes with JavaScript for adding/removing them instead of directly changing the display property. This enables the use of CSS transitions, enhancing user experience.

I'm having trouble getting my JavaScript to function properly. It recognizes the ID, but for some reason, it is not implementing the display changes

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Navigating through information using Axios in React JS

The variable referenced is not defined, resulting in a TypeError

Error loading Google Maps in Bootstrap 3.0 modal due to incomplete loading

The ng-model does not bind properly when the input value is set through JavaScript instead of directly from

Javascript problem: Trouble with event.clientX position

Oops! Issue detected: improperly configured csrf in Express JS 4

Please indicate a width of 3 characters for the HTML input text

determining the 'top' and 'right' coordinates upon clicking

What are some strategies for receiving multiple responses with just one ajax request?

Adjust the size of the input form

Ways to invoke a class method by clicking on it

storing data in a nested child object within an array

React - What is the best approach to handling the state of numerous dynamically generated controlled inputs?

Opt for the Coldfusion page as the default option

jQuery Validation plugin designed for responding to changes in elements and sending asynchronous requests

Organize information received from a post request into a JSON template

I'm not quite sure how to properly load data from an external JSON file into Highcharts

What is the best way to format Json data from the Wikipedia API for a mobile application redesign?

Appears as though time is slipping away during date conversions

What is the best way to implement a collapsible menu in a fixed sidebar for mobile devices using Bootstrap 4?