Executing javascript function onclick to hide one element and show another

I am attempting to execute a javascript function on an anchor tag click and would hide the ul class, while allowing another ul to take its place. However, the ul I want to disappear is not responding to the link click.


<div class="help">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript">			
			function createTop (topnum) {
				var topstart = '<p>';
				var topend = '</p>';
				switch (topnum) {
					case 1:
						return topstart + 'A1' + topend;
					case 2:
						return topstart + 'A2' + topend;
					case 3:
						return topstart + 'A3' + topend;
					default:
						alert("Error");
				}
			}
			
			function showTop(num) {
				var snum = '"#S' + num + '"';
				$(document).ready(function(){
					$(snum).click(function(){
						$("#topics").hide();
				});
				var hidtop = createTop(num);
				document.getElementById('hidtop').innerHTML = hidtop;
				return false;
			}
		</script>
		<ul id="hidtop"></ul>
		<ul id="topics">
			<a href="#" onClick="showTop(1);" class="topic" id="S1">B1</a>
			<a href="#" onClick="showTop(2);" class="topic" id="S2">B2</a>
			<a href="#" onClick="showTop(3);" class="topic" id="S3">B3</a>
		</ul>
	</div>				

Open in new window

Caden PangHS Junior Web DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dorababu MSenior Software EngineerCommented:
Try this way
$(document).ready(function() {
  $('#topics a').click(function(e) {
    e.preventDefault();
    var divId = $(this).attr('id').replace(/[^\d]+/, '');
    $("#topics").hide();
    var hidtop = createTop(divId);
    document.getElementById('hidtop').innerHTML = hidtop;
    return false;

  });
});

function createTop(topnum) {
  topnum = parseInt(topnum);
  var topstart = '<p>';
  var topend = '</p>';
  switch (topnum) {
    case 1:
      return topstart + 'A1' + topend;
    case 2:
      return topstart + 'A2' + topend;
    case 3:
      return topstart + 'A3' + topend;
    default:
      alert("Error");
  }
}

Open in new window


Working fiddle https://jsfiddle.net/DorababuMeka/98o8ssrw/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
This nearly equivalent of the code your posted :

<div class="help">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<ul id="hidtop"></ul>
	<ul id="topics">
		<a href="#" data-top="A1" class="topic">B1</a>
		<a href="#" data-top="A2" class="topic">B2</a>
		<a href="#" data-top="A3" class="topic">B3</a>
	</ul>
	<script type="text/javascript">			
		$("a.topic").click(function(event) {
			event.preventDefault();
			$("#topics").hide();
			$('#hidtop').html("<p>" + $(this).data("top") + "</p>");
		});			
	</script>
</div>

Open in new window

0
Julian HansenCommented:
Let's take a look at your function
function showTop(num) {
				var snum = '"#S' + num + '"';
				$(document).ready(function(){
					$(snum).click(function(){
						$("#topics").hide();
				});
				var hidtop = createTop(num);
				document.getElementById('hidtop').innerHTML = hidtop;
				return false;
			}

Open in new window

You need to ask yourself what you are trying to do here.

You have an inline event handler (click) calling a plain JavaScript function which in turn is using jQuery to load another event handler on document load which you are then trying to use to handle the click you just handled.

You are then using plain JavaScript to create a <p> element which you are then inserting into a <ul> which is not valid.

If you are going to use jQuery then use it properly. Create an event handler on the <a> elements and append a <li> to the <ul>
Something like this
<div class="help">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul id="hidtop"></ul>
    <ul id="topics">
      <a href="#" class="topic" id="S1">B1</a>
      <a href="#" class="topic" id="S2">B2</a>
      <a href="#" class="topic" id="S3">B3</a>
    </ul>
  </div>        
<script src="http://code.jquery.com/jquery.js"></script>  
<script>
$(function() {
  // EVENT HANDLER FOR CLICK ON <a>
  $('#topics a').click(function(e) {
    e.preventDefault();

    // HIDE THE <ul>
    $('#topics').hide();

    // GET THE INDEX OF THE ELEMENT CLICK AND ADD 1 
    // BECAUSE index IS ZERO BASED
    var index = $(this).index() + 1;

    // APPEND THE TEXT AS <li> TO THE TARGET <ul>
    $('#hidtop').append(
      $('<li>').html('A' + index)
    )
  });
});
</script>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.