1

I am trying to change the class of a button on one html page by clicking the button on another html page.

  • I am a beginner/medium-level programmer

This is the page where I'm supposed to click the button(html and js respectively): output.html

<button class="waves-effect waves-light btn" id = "wutwut" 
onclick="testJS()">What Now?</button>

$("#wutwut").click(function() {
    console.log("let's go");
    var tutorial= $("#replace").html
    console.log(tutorial);
    $(function testJS(){
        var b = document.getElementById(tutorial)
        url='https://bili.pythonanywhere.com/tutorialsfinal.html?tutorial=' + encodeURIComponent(b)
        document.location.href=url;
        console.log("let's get this party started");

    });

});

This is the page where the button class is supposed to change(html and js respectively): tutorialsfinal.html

<script> $('.collapsible').collapsible('open', 1);</script>

  <ul class="collapsible popout" data-collapsible="accordion">
    <li>
      <div class="collapsible-header" id="soccer"><i class="material-icons"></i>Soccer</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
   </li>
   <li>
     <div class="collapsible-header" id="basketball"><i class="material-icons"></i>Basketball</div>
     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header" id="football" ><i class="material-icons"></i>Football</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>








window.onload = function () {
    var url = document.location.href,
      params = url.split('?')[1].split('&'),
      data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
      tmp = params[i].split('=');
      data[tmp[0]] = tmp[1];
}

function tutorialmatch(){
console.log("let's go");
$('#replace').removeClass('collapsible-header').addClass('collapsible-header active');


tutorialmatch();
console.log(tutorialmatch);

I initially thought this should have worked, but when I run the code, the very first console message("let's get this party started") doesn't show.

Any help/advice is much appreciated! Thank you!

TheOnceler
  • 11
  • 1
  • 4
  • you SHOULDN'T see that "let's get this party started" message, as that is being run AFTER that page has unloaded (which means its not actually being run). If you want to pass data from one page/page el to the next, then you either pass it as a parameter on the URL, or save it to the localStorage and call it in the new page. – Snowmonkey Jan 19 '18 at 16:12
  • $("#replace").html() – jilykate Jan 19 '18 at 16:12
  • What I mean is, by doing `document.location.href = ...`, you've effectively unloaded the current page and loaded a new one. Any running js is closed, and do not apply to the new page. If you load the new page INTO the current page as, for example, an ajax call, that would be different. But that's not what you're actually doing. – Snowmonkey Jan 19 '18 at 16:14
  • You cannot change the text on another page using client side js, you can only change the text of the page you are on (unless the other page is open in an iframe) – Pete Jan 19 '18 at 16:16
  • Hm, I understand what you are saying about the console, but as for the parameters, I used them to transfer data from multiple different buttons onto the output.html page. However, I'm trying to fit all of this data through the "What Now?" button on output.html into tutorialsfinal.html. Would localStorage allow you to do so? – TheOnceler Jan 19 '18 at 16:17
  • I was just using code from this link: https://stackoverflow.com/questions/17502071/transfer-data-from-one-html-file-to-another – TheOnceler Jan 19 '18 at 16:17

1 Answers1

2

Use localStorage.

In the first function set the value

$(function testJS(){
        //rest of the code
        localStorage.setItem('keyName',value)
        document.location.href=url;
        console.log("let's get this party started");

    });

In the second page retrieve the value using getItem

function tutorialmatch(){
var getValue = localStorage.getItem('keyName')
$('#replace').removeClass('collapsible-header').addClass('collapsible-header active');
}
brk
  • 48,835
  • 10
  • 56
  • 78
  • Hmm it's saying testJS() isn't defined for some reason? Was I not supposed to include it under $("wutwut").click(function() – TheOnceler Jan 19 '18 at 16:28