如何使用按钮在 2 个 html 页面之间传递数据答案

【问题标题】：How do I pass data between 2 html pages using a button如何使用按钮在 2 个 html 页面之间传递数据
【发布时间】：2018-01-19 16:10:19
【问题描述】：

我试图通过单击另一个 html 页面上的按钮来更改一个 html 页面上的按钮的类。

我是初学者/中级程序员

这是我应该点击按钮的页面（分别是html和js）：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");

    });

});

这是按钮类应该更改的页面（分别为html和js）：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);

我最初认为这应该可行，但是当我运行代码时，第一个控制台消息（“让我们开始这个派对”）没有显示。

非常感谢任何帮助/建议！谢谢！

【问题讨论】：

你不应该看到“让我们开始这个派对”的消息，因为它是在页面卸载后运行的（这意味着它实际上没有运行）。如果您想将数据从一个页面/页面 el 传递到下一个页面，那么您可以将其作为 URL 上的参数传递，或者将其保存到 localStorage 并在新页面中调用。
$("#replace").html()
我的意思是，通过document.location.href = ...，您有效地卸载了当前页面并加载了新页面。任何正在运行的 js 都被关闭，并且不适用于新页面。如果您将新页面加载到当前页面中，例如，ajax 调用，那将是不同的。但这不是你真正在做的事情。
不能使用客户端js修改其他页面的文字，只能修改当前页面的文字（除非其他页面是在iframe中打开的）
嗯，我理解你所说的控制台，但至于参数，我用它们将数据从多个不同的按钮传输到 output.html 页面上。但是，我试图通过“现在怎么办？”来拟合所有这些数据。 output.html 上的按钮到 tutorialsfinal.html。 localStorage 会允许你这样做吗？

标签： javascript jquery html materialize

【解决方案1】：

使用本地存储。

在第一个函数中设置值

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

    });

在第二页中使用 getItem 检索值

function tutorialmatch(){
var getValue = localStorage.getItem('keyName')
$('#replace').removeClass('collapsible-header').addClass('collapsible-header active');
}

【讨论】：

嗯，它是说 testJS() 由于某种原因没有定义？我不应该将它包含在 $("wutwut").click(function() 下吗