Passing onClick variable to Javascript

Question

I'm trying to create a menu bar that will refresh a DIV when a button is clicked. I had earlier success with this when it was only one button but now I want the same affect from ten buttons as well as the original first button.

The func.php file

function loggedin()
{
print"
<div class=\"container\">
<div class=\"titlebar\">
</div>
<div class=\"spacerH\">
</div>
<div class=\"navbar\">
     <div class=\"menubuttonsl\"></div>
     <div class=\"menubuttonsl\"><a class=\"home_out\" onClick=\"changeContent(1);return false;\" title=\"HomePage\"></a></div>
     <div class=\"menubuttonsl\"><a class=\"email_out\" onClick=\"changeContent(2);return false;\" title=\"Messages\"></a></div>
     <div class=\"menubuttonsl\"><a class=\"notify_out\" onClick=\"changeContent(3);return false;\" title=\"Notifications\"></a></div>
     <div class=\"menubuttonsl\"><a class=\"mine_out\" onClick=\"changeContent(4);return false;\" title=\"My Stuff\"></a></div>
     <div class=\"menubuttonsl\"><a class=\"comm_out\" onClick=\"changeContent(5);return false;\" title=\"Community\"></a></div>
     <div class=\"menubuttonsl\"><a class=\"live_out\" onClick=\"changeContent(6);return false;\" title=\"Live Action\"></a></div>
     <div class=\"menubuttonsl\"><a class=\"hot_out\" onClick=\"changeContent(7);return false;\" title=\"What's Hot\"></a></div>
     <div class=\"menubuttonsr\"><a class=\"im_out\" onClick=\"changeContent(10);return false;\" title=\"Instant Messanger\"></a></div>
     <div class=\"menubuttonsr\"><a class=\"upload_out\" onClick=\"changeContent(9);return false;\" title=\"Upload Pics/Vids/Audio\"></a></div>
     <div class=\"menubuttonsr\"><a class=\"rate_out\" onClick=\"changeContent(8);return false;\" title=\"Rate Pics\"></a></div>
</div>
<div class=\"header2\"><div id=\"myTable\">";
print"</div></div>
</div>
";

}

The hopeful JavaScript on index.php

<script>
function changeContent(display)
{
document.getElementById('myTable').innerHTML=document.getElementById('showTable').innerHTML;
}
</script>
<script type="text/html" id="showTable">
if (display=='signup') {<?php bottomtable2(); ?>}
else if (display=='1') {<?php MainPanel(); ?>}
else if (display=='2') {<?php Messages(); ?>}
else if (display=='3') {<?php Notifications(); ?>}
else if (display=='4') {<?php MyStuff(); ?>}
else if (display=='5') {<?php Community(); ?>}
else if (display=='6') {<?php LiveAction(); ?>}
else if (display=='7') {<?php WhatsHot(); ?>}
else if (display=='8') {<?php RatePics(); ?>}
else if (display=='9') {<?php Upload(); ?>}
else if (display=='10') {<?php IMessenger(); ?>}
</script>

The original JavaScript that work perfectly with only the one case

<script>
function changeContent()
{
document.getElementById('myTable').innerHTML=document.getElementById('showTable').innerHTML;
}
</script>
<script type="text/html" id="showTable">
    <?php bottomtable2(); ?>
</script>

I'm not against creating new JavaScript for the ten additions but thought I could tie into the existing and working script. The result is I've totally lost the affect and get no reaction to any of the onClicks tho I do get "} else if (display=='1') {} else if (display=='2') {} else if (display=='3') {} else if (display=='4') {} else if (display=='5') {} else if (display=='6') {} else if (display=='7') {} else if (display=='8') {} else if (display=='9') {} else if (display=='10') {}" printed at the top of my page for some reason. What am I missing?

Remove `type="text/html"` from the tag. Otherwise the browser doesn't interpret the content as JavaScript. But if your previous version worked, that means that `bottomtable2()` outputs HTML, which in turn will make your JavaScript invalid. — Felix Kling, Nov 10 '13 at 16:34
@FelixKling did that tho it worked fine before. still no change tho to any issue. Yes all the functions I'm directing to output HTML at some point. bottomtable2() is a PHP function to display a FORM page — Steven Vanerp, Nov 10 '13 at 16:38
there is some work to make your code clean...I think you should get back to learning the basics of jquery, event handling, pattern recognition (& then css as well). that'll help you more than debugging this code (& leaving it messy) or providing you directly with a clean & working code you won't understand — mikakun, Nov 10 '13 at 16:50
start using that many `if` statements chained it's time to start learning about arrays and DRY principle. One simple css rule would remove a ton of inline style in nav also. — charlietfl, Nov 10 '13 at 16:55
@mikakun This is but a small portion of the site I'm designing. The code being "messy" I assume refers to using a direct style for each DIV rather than setting up classes for each in CSS. My choice to do this was to get a functioning script before "cleaning". I admit to being a novice with JQuery tho since my attempt is to modernize a site I created nearly a decade ago with tables and frames. That being said I'm not overly sure how helpful your comment is to solving the question at hand. — Steven Vanerp, Nov 10 '13 at 16:56
There...cleaned up the DIVs with CSS classes. @charlietfl yes please if there is a better way I'd love to learn it. The data my site handles has me using tons of ifs and elseifs. Please point me to a better solution. — Steven Vanerp, Nov 10 '13 at 17:06
if it does not compel you to make this an exercise to learn for yourself & refresh your knowledge with modern practices then indeed my comment was not helpful; you can ask for a fish or learn how to fish... — mikakun, Nov 10 '13 at 17:07
` onClick=\"changeContent(1);return false;\"` this is prehistory, http://jqfundamentals.com/chapter/events it looks pretty complete — mikakun, Nov 10 '13 at 17:11

Passing onClick variable to Javascript

0 Answers0