user3050478 user3050478 - 6 months ago 7
HTML Question

Getting data from php, sending directly to javascript and using Comparison Operators with the data

Let's say in this case, it needs to be done this way...

I have a menu bar to the left side of the screen that loads a default initial "position", whatever menu set to 1 loads the page with it open, whatever set to 0 loads the page closed.

This website works with subtopics, pretty much this way:

Example: "http://localhost/?subtopic=latestnews".

And all the subtopics are divided between the topics (menus).

What I'm trying to do with this menu is: Get the page to identify the current subtopic page, get its topic and when the page is loaded, only that menu will be open.

Example: Menus | News.........| Support

........Subtopics....| latestnews.| contactus

When I open the page latestnews, only the menu news loads opened, and when I open contactus, only the support menu loads opened.

I already have a function returning the topic value from any subtopic loaded, and I'm being able to send it to the javascript and

alert()
it already, but when I use comparison operators in the javascript to change the default values (1 : 0) it always returns 0, no matter what.

OBS.: When I manually edit the values (1 : 0) without the operators the menu works properly.

Here is the JavaScript part:

function InitializePage() {
LoadMenu();
}
function LoadMenu() {
document.getElementById("submenu_" + activeSubmenuItem).style.color = "white";
document.getElementById("ActiveSubmenuItemIcon_" + activeSubmenuItem).style.visibility = "visible";
var news, aboutgatia, gameguides, library, community, events, forum, account, support, shop;
var div = document.getElementById("topic_finder"); //here is the div with the topic name to compare
var myData = div.textContent;
if (self.name.lastIndexOf("&") == -1) {
news = ((myData == "news") ? 1 : 0); //Here the comparison operator that is not working and I can't figure out why
aboutgatia = 0;
gameguides = 0;
library = 0;
community = 0;
events = 0;
forum = 0;
account = 0;
support = 0;
shop = 0;
alert(myData);
self.name = "news=" + news + "&aboutgatia=" + aboutgatia + "&gameguides=" + gameguides + "&library=" + library + "&community=" + community + "&events=" + events + "&forum=" + forum + "&account=" + account + "&support=" + support + "&shop=" + shop + "&";
}
FillMenuArray();
InitializeMenu();
}


And here is the PHP/HTML part:

<script type="text/javascript">InitializePage();</script></div>
<div id="topic_finder" style="display: none;">
<?php
$topic_output = getTopic($subtopic); //Here is that function I mentioned before
echo htmlspecialchars($topic_output);
?>
</div>

Answer

Since you are not actually showing the string, why not just do

news = "<?php echo htmlspecialchars($topic_output); ?>" == "news";

Your current code will look like this in the browser

<div id="topic_finder" style="display: none;">
whitepace  news whitespace
</div>

So var myData = div.textContent; does not return "news" but something else. Try trim to remove leading and trailing spaces

var myData = div.textContent.trim(); 

and console log it to see if it is what you expect - then this would work too

news = myData == "news"

without the ternary

Note .trim() needs a polyfill for IE<9:

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}