How to Call javascript function with onclick event in another page html

Question

I'm creating a personal "Portfolio Website" which has 2 html pages.

On the First page there is portfolio.html, I use JavaScript to Filter Category and the Default Category activity is Show All,

well, .. On the Second page of index.html, I have a button that redirects to the portfolio.html page.

My question: "How to make a button in index.html so that it directly redirects to the portfolio.html page & automatically the Default Category activity is to Category Programming?"

Please Feedback & Help, Thank You.

This is the Code button in index.html

<a href="menu/portfolio.html#myprojects"><button onclick="filterSelection('programming')">Read More</button></a>

This is the code in portfolio.html

<!-- FILTER BUTTON -->
<div id="myBtnContainer">
    <a href="#myprojects"><button class="btn active" onclick="filterSelection('all')">Show all</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('programming')">Programming</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('game')">Game Development</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('design')">Graphic Design</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('3d')">3D Creation</button></a>
</div>

<!-- Card Portfolio -->
  <div class="container">
      <!-- Card Portfolio -->
    <div class="filterDiv programming">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Programming</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p>
              <h2 class="blog-title">What is the future of front end development?</h2>
              <p class="blog-description">My thoughts on the future of front end web development</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv 3d">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">3D Creation</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1413708617479-50918bc877eb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Photography gear you need this year</h2>
              <p class="blog-description">Looking to upgrade your gear? Here is the list of the best photography tools for this year</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv design">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Graphic Design</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1592496001020-d31bd830651f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Mediation and Mental Wellness Best Practices</h2>
              <p class="blog-description">Mediation has transformed my life. These are the best practices to get into the habit</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv programming">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Programming</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p>
              <h2 class="blog-title">What is the future of front end development?</h2>
              <p class="blog-description">My thoughts on the future of front end web development</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv 3d">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">3D Creation</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1413708617479-50918bc877eb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Photography gear you need this year</h2>
              <p class="blog-description">Looking to upgrade your gear? Here is the list of the best photography tools for this year</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv design">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Graphic Design</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1592496001020-d31bd830651f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Mediation and Mental Wellness Best Practices</h2>
              <p class="blog-description">Mediation has transformed my life. These are the best practices to get into the habit</p>
          </div>
      </div>
        </a>
    </div>
    <!-- End Card -->
  </div>
<!-- End Card -->

This is the code in script.js

// JavaScript Filter Category
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}

function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
    arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
}
element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var button = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < button.length; i++) {
button[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
});
}

This is an example of a Picture

index.html

when I click the read more button in index.html default category activity not change to Programming

and this is what I want when I click the read more button in index.html

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Liam, Nov 19 '20 at 13:58

score 1 · Answer 1 · answered Nov 19 '20 at 14:15

1

you could use Query String Parameters in your url string like so:

<a href="menu/portfolio.html?filter=programming#myprojects">Read More</a>

and in your portfolio.html check the Query String Parameters to apply the required filtering or whatever custom actions you want to make based on the string provided in the filter param

var urlParams = new URLSearchParams(window.location.search);
urlParams.get('filter') // returns "programming"

Read more about URLSearchParams

answered Nov 19 '20 at 14:15

toms

515
6
23

I don't understand, does it automatically redirect to the programming category when I click Read More? – Irfan Hafizh Nov 19 '20 at 14:40
Can you edit all my code and put it in the answer here, Please.. I don't really understand because I'm still a beginner hehe – Irfan Hafizh Nov 19 '20 at 15:21
@IrfanHafizh when you click read more, it would redirect to the portfolio page, and then to `myprojects` section if you set anchor tags on the page. by adding `filter=programming` to the query you are including extra information with your navigation. Your javascript inside portfolio.html can make use of this information to execute more code like setting your filters, adding or removing elements from the page or whatever you want to do that can be done with javascript. I will not write your whole code for you as this is not how stack overflow works. We get paid to write code for others. – toms Nov 24 '20 at 10:09

score 1 · Answer 2 · answered Nov 19 '20 at 16:45

1

Please backup your work first in another folder before trying this. My codes only contain the relevant information only for checks.

index.php

This page only contains the button for redirection. Copy the code exactly the way it is.

<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<body>
<a href="menu/portfolio.php?category=programming">Visit portfolio</a>
</body>
</html>

portfolio.php

<?php
 //default value
 $category = 'all';
 if(isset($_GET['category']) && !empty($_GET['category'])){
 $category = $_GET['category'];
 }
 ?>
 <!DOCTYPE html>
 <html>
 <head>
 <title>Portfolio</title>
 </head>
 <body>
 <div id="displayed"></div>
 <script>
//create an array of all the categories called all_categories.
//A user might literally type a crazy query string so we verify
let all_categories = ['programming', 'game', 'design', '3d', 'all'];
let fromURL = '<?php echo $category;?>';
let accepted = all_categories.includes(fromURL) ? fromURL : 'all';
// In the accepted variable, we check if the query string belong to our defined values. If not, we assign all to accepted but if it belongs, then we accept it.
filterSelection(accepted);
function filterSelection(category) {
    document.getElementById('displayed').innerText = category;
}
</script>
</body>
</html>

Anytime you change the value of category from the browser address bar, the innerText of html div with id displayed is changed to the new category, this could be what you want your program to do. If the category is not recognized amongst the array of categories, then all is set to accepted variable which can literally be called using filterSelection('all') for default setting

answered Nov 19 '20 at 16:45

Julius

491
2
10

this works, but how do I implement it into the original portfolio.php file – Irfan Hafizh Nov 19 '20 at 16:55
Copy the php part of my `portfolio.php` starting from `` and paste it at the top of your own `portfolio.php` page. Then copy my entire JavaScript code excluding my funny `filterSelection()` definition part and paste it at the top of your js code. Provided you have defined your `filterSelection(argument)` very well, it should work. Anytime you want the default as per your definition, just call `filterSelection('all')` – Julius Nov 19 '20 at 17:04
this works, the button follows according to all_categories, but the portfolio / filterDiv card does not appear – Irfan Hafizh Nov 19 '20 at 17:21
Then the issue should be within your `filterSelection()` definition which is too bulky. Instead of looping through the characters of a class name, why not use `element.classList.toggle('new-classname')` to add new-classname to become `old-classname new-classname` and `element.classList.remove('new-classname')` to remove new-classname to become `old-classname`. You need to check the function very well, was it working very well before we added php? – Julius Nov 19 '20 at 17:40
before I add php it works very well, now what should I replace in the javascript code? – Irfan Hafizh Nov 19 '20 at 17:53
Try changing the link from index.php to `Read more` – Julius Nov 19 '20 at 17:57
I think the problem is in the javascript function which can't accept 2 functions at once, is that right? – Irfan Hafizh Nov 19 '20 at 18:04
oh god this is really difficult and complex, I am very sorry if it bothers you broo – Irfan Hafizh Nov 19 '20 at 18:26
What you are going to do now is select all your project folders or files and compress them to .zip and send it to my contact so I can fully evaluate and correct it. If you can not compress them then select all the files you used and send to my contact. My contact is available [Here](http://freegivers.online) and this link can only be visited once for privacy reasons so be really quick. Thanks! – Julius Nov 19 '20 at 19:45
This page is being visited more than once so information has been locked! bro.. sorry im late cause im sleeping haha, can u resend the link ? – Irfan Hafizh Nov 19 '20 at 22:14
i have updated the page, click on the link again quickly before those spammers do – Julius Nov 19 '20 at 22:17
I've sent it all in the email bro, I am very sorry if it bothers you, thank you you are kind – Irfan Hafizh Nov 19 '20 at 22:28

Julius · Accepted Answer · 2020-11-19T16:21:42.420

0

I advice you use .php instead of .html. With php, you can receive a query String and pass it to your js filterSelection(). On the index.php, the button should be like <a href="receiving-page.php?category=programming"><button class="btn active">Button name</button></a> Now on the receiving-page.php page, type the following at the top of the page..

<?php
  //default value
  $category = 'all';
  if(isset($_GET['category']) && !empty($_GET['category'])){
  $category = $_GET['category'];
  }
  ?>

Then type the following in your js..

//create an array of all the categories called all_categories.
//A user might literally type a crazy query string so we verify
let fromURL = '<?php echo $category;?>';
filterSelection(all_categories.includes(fromURL) ? fromURL : 'all');

edited Nov 19 '20 at 16:21

answered Nov 19 '20 at 14:34

Julius

491
2
10

does receiving-page.php mean my portfolio.html? – Irfan Hafizh Nov 19 '20 at 14:51
Yes, `portfolio.html` should now be `portfolio.php` (Everything you have written will remain unchanged) but you need to have a local server like the one from XAMP or WAMP installed in your machine during developement. – Julius Nov 19 '20 at 14:56
PHP Syntax Check: Parse error: syntax error, unexpected 'category' (T_STRING), expecting ']' in your code on line 5 $category = $_GET['category']; – Irfan Hafizh Nov 19 '20 at 15:14
There is a typo, please change form `!empty($_GET['category])` to `!empty($_GET['category'])` . I will edit the answer right. The `apostrophe` is missing – Julius Nov 19 '20 at 15:19
Can you edit all my code and put it in the answer here, Please.. I don't really understand because I'm still a beginner hehe – Irfan Hafizh Nov 19 '20 at 15:21
Follow my edited answer, its very simple. But if you insist then first provide your entire codes or a link to them. – Julius Nov 19 '20 at 15:30
when I enter the code in the portfolio.php Not Found The requested URL was not found on this server. – Irfan Hafizh Nov 19 '20 at 15:42
No No No change my `receiving-page.php` to your `portfolio.php?category=programming` Change anything `receiving-page.php` on my answer to your desired page where the query String will be received (`portfolio.php`) – Julius Nov 19 '20 at 15:49
yeah i've changed it to portfolio.php but still Not Found The requested URL was not found on this server. – Irfan Hafizh Nov 19 '20 at 15:56
I think it is because the `portfolio.php` and `index.php` are not found on the same folder. From your first button, it shows you should now change it to `menu/portfolio.php?category=programming` – Julius Nov 19 '20 at 15:59
Use the correct address for the file location using folder names to move forward and `../` to move backward` – Julius Nov 19 '20 at 16:01
its work, but the Default Category activity still Show All not change to Programming – Irfan Hafizh Nov 19 '20 at 16:05
Make sure the query String is spelled correctly and without whitespaces. Now test your program before calling `filterSelection()` as follows. add `alert(fromURL)` just below where `fromURL` is declared to see the result. Change the query String from the browser address bar several times and load page to see several results. Comment what you see. – Julius Nov 19 '20 at 16:12
Make sure you remove your own `filterSelection('all')` from the script – Julius Nov 19 '20 at 16:16
i don't understand, can you edit in your answer code – Irfan Hafizh Nov 19 '20 at 16:21
sorry if i bother you bro, i am still too beginner – Irfan Hafizh Nov 19 '20 at 16:22
I am typing a demonstration for you as another answer, don't worry we are all beginners in different levels – Julius Nov 19 '20 at 16:26
The alert(fromURL) work bro, now how we make Default Category activity to Programming ? – Irfan Hafizh Nov 19 '20 at 16:28
and the alert says – Irfan Hafizh Nov 19 '20 at 16:33
Read my new answer and let me know if there is another problem, it must be solved bro. – Julius Nov 19 '20 at 16:46

score -1 · Answer 4 · answered Nov 19 '20 at 14:06

-1

You need to create two separate files in your directory (index.html,posts.html) ‍‍‍‍‍ <a href="./post.html">Go to the post</a> <a href="./index.html">Go to the index</a>

answered Nov 19 '20 at 14:06

Iraj Habibzadeh

1
1

for what I created two separate files? – Irfan Hafizh Nov 19 '20 at 14:11

How to Call javascript function with onclick event in another page html

4 Answers4