Include HTML in JavaScript (.js) File

Question

HTML

<?php $var = 1; include('PHP/NavigationBar.php'); ?>

Navigation.php

<div class="sidenav">

    <h5>JavaScript</h5>

    <button class="w3-button w3-theme w3-block w3-left-align w3-padding-small"
    onclick="myAccFunc('1')"> Main Heading <i class="fa fa-caret-down"></i></button>

      <div id="1" class="w3-blue w3-hide w3-card" >
        <a class="<?php echo (($var==1)?'active':'');?>" href="Page1.php">Page 1</a>
        <a class="<?php echo (($var==2)?'active':'');?>" href="Page2.php">Page 2</a>
        <a class="<?php echo (($var==3)?'active':'');?>" href="Page3.php">Page 3</a>
        <a class="<?php echo (($var==4)?'active':'');?>" href="Page4.php">Page 4</a>
      </div>
</div>

Here is my Navigation Menu. Currently with just 4 items and the Class="Active" represents the active Page So if the user is on page 2, the page 2 on the Nav will be highlighted with that Class

This works completely fine but i have to shift from PHP to JavaScript

So the HTML Line becomes

<script type="text/javascript" src="PHP/Navigation.js"></script>

I can get the current URL by window.location.href How do i pass this to the JS File and How do i include the HTML Contents in a JS File (Currently PHP File)?

I have put all the Weblinks in an Array in the JS file. So what do i do next to achieve the same thing i achieved using PHP and HTML but with JavaScript and HTML.

I just need to Import the Nav Menu and Highlight the Current Site using JavaScript

keep extension of file to php only and include like <script type="text/javascript" src="PHP/Navigation.php"></script> — Ronak Dhoot
– Ronak Dhoot, Commented Mar 22, 2020 at 9:14
Getting this Error : Uncaught SyntaxError: Unexpected token '<' @RonakDhoot — Akash R
– Akash R, Commented Mar 22, 2020 at 9:18
could you please share your Navigation.js and NavigationBar.php files — Ronak Dhoot
– Ronak Dhoot, Commented Mar 22, 2020 at 9:21
Navigation.php is there in the question. There is nothing in my Navigation.js yet. I just want to convert my Navigation.oho file into JavaScript where all its contents are written in JS @RonakDhoot — Akash R
– Akash R, Commented Mar 22, 2020 at 9:28

Ronak Dhoot · Accepted Answer · 2020-03-22 09:54:38Z

2

It took me time to understand your expectations but now here is your Navigation.js

var activeClass = new Array(4);
if(window.location.href.includes('Page1.php')) {
    activeClass[0] = 'active';
} else if(window.location.href.includes('Page2.php')) {
    activeClass[1] = 'active';
} else if(window.location.href.includes('Page3.php')) {
    activeClass[2] = 'active';
} else if(window.location.href.includes('Page4.php')) {
    activeClass[3] = 'active';
} 
document.write('<div class="sidenav"><h5>JavaScript</h5>'+
    '<button class="w3-button w3-theme w3-block w3-left-align w3-padding-small" onclick="myAccFunc(1)">'+
    ' Main Heading <i class="fa fa-caret-down"></i></button><div id="1" class="w3-blue w3-hide w3-card" >');
document.write('<a class="'+activeClass[0]+'" href="Page1.php">Page 1</a>');
document.write('<a class="'+activeClass[1]+'" href="Page2.php">Page 2</a>');
document.write('<a class="'+activeClass[2]+'" href="Page3.php">Page 3</a>');
document.write('<a class="'+activeClass[3]+'" href="Page4.php">Page 4</a>');
document.write('</div></div>');

answered Mar 22, 2020 at 9:54

Ronak Dhoot

2,3311 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Akash R Over a year ago

Hold on let me check

Akash R Over a year ago

Man! Thank you so very much.. Just another question if you dont mind. When i included this in script in my html. My other script stopped working. Do you know how to get over this?

Akash R Over a year ago

Error that the other class contents are not found

Ronak Dhoot Over a year ago

path and filename exists ?

Akash R Over a year ago

Yes. If i remove this JS file it works fine. i searched online and found that there would be problems if 2 scripts are included and i need to set them in proper order for it to work fine

Collectives™ on Stack Overflow

Include HTML in JavaScript (.js) File

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related