Function 参数未传递。如何正确地将参数传递到另一个 JavaScript 文件的 function 中？

Question

I want to to call a function file2Function(getValue) of a file (page2.js) from another JavaScript File (page1.js) to open new page in browser and display some data on it using parameter passed via myFunction1(e) into file2Function as file2Function(itemFromItems) .我想从另一个 JavaScript 文件(page1.js)调用文件（ (page2.js) ）的 function file2Function(getValue) ，以在浏览器中打开新页面并使用通过myFunction1(e) into file2Function as file2Function(itemFromItems)的参数显示一些数据myFunction1(e) into file2Function as file2Function(itemFromItems) 。 So file2Function(getValue) should take value of var itemFromItems and should display on page2.html .所以file2Function(getValue)应该取var itemFromItems的值并且应该显示在page2.html上。 But it is displaying "undefined" for getValue .但它为getValue显示“未定义”。 Kindly help me finding out where I am doing Mistake.请帮助我找出我在哪里做错了。 Thank You.谢谢你。

 // page1.js function file1Function() { var secPage1 = document.getElementById("page1Section"); var heading = document.createElement("h4"); var anchor= document.createElement('a'); anchor.setAttribute('href',"#"); anchor.innerText = "Click Me"; anchor.addEventListener("click", myFunction1); heading.appendChild(anchor); secPage1.appendChild(heading); anchor.id=1; function myFunction1(e) { var itemFromItems = e.currentTarget.getAttribute("id"); console.log("item",itemFromItems); file2Function(itemFromItems); } } // page2.js var globalVar; function file2Function(getValue) { console.log("getValue",getValue); window.open("page2.html"); // window.open("https://www.google.com/"); globalVar=getValue; console.log("globalVarNow",globalVar); } function loadDynamicData() { var para=document.getElementById("paraId"); console.log(para); para.innerText=globalVar+": value from myFunction1 (Click Event)"; var secPage2 = document.getElementById("page2Section"); var headingJS2 = document.createElement("h4"); headingJS2.innerText=" This is dynamic heading"; secPage2.appendChild(headingJS2); console.log(para); }

 <.-- page1.html --> <.DOCTYPE html> <html> <head> <script src="js/page1.js"></script> <script src="js/page2.js"></script> </head> <body onload="file1Function()"> <h3>This is page1</h3> <section id="page1Section"> </section> <script> </script> </body> </html> <!-- page2.html --> <!DOCTYPE html> <html> <head> </head> <body onload="loadDynamicData()"> <h3>This is page2</h3> <section id="page2Section"> </section> <p id="paraId"></p> <script src="js/page2.js"></script> </body> </html>

Answer 1

The problem is that globalVar is a global variable, but the value you are assigning to it in file2Function() is accessable only within its scope, that is why you are getting undefined , because loadDynamicData() has no access to the new value of globalVar .问题是globalVar是一个全局变量，但是您在file2Function()中分配给它的值只能在其 scope 内访问，这就是您得到undefined的原因，因为loadDynamicData()无法访问globalVar的新值.

You could call loadDynamicData() from file2Function() and pass getValue as an argument, but since you need to open page2 before executing loadDynamicData() it won't work.您可以从file2Function()调用loadDynamicData() ) 并将getValue作为参数传递，但由于您需要在执行loadDynamicData()之前打开page2 ，因此它不起作用。

What I suggest is you pass getValue along with your URL as a query parameter and get it from inside loadDynamicData() , it'll work fine.我建议您将getValue与您的URL作为查询参数一起传递，并从loadDynamicData()内部获取它，它会正常工作。

SOLUTION:

function file2Function(getValue)
{
    window.open("page2.html?value="+getValue);
  // window.open("https://www.google.com/");
}

function loadDynamicData()
{
    var url_string = window.location.href
    var url = new URL(url_string);
    var globalVar = url.searchParams.get("value");


    var para=document.getElementById("paraId");
    console.log(para);
    para.innerText=globalVar+" : value from myFunction1 (Click Event)";


    var secPage2 = document.getElementById("page2Section");
        var headingJS2 = document.createElement("h4");
        headingJS2.innerText=" This is dynamic heading";
        secPage2.appendChild(headingJS2);
    console.log(para);

}

If you want to hide the values you can use sessionStorage instead of query parameters:如果要隐藏值，可以使用sessionStorage而不是查询参数：

function file2Function(getValue)
{
  sessionStorage.setItem('value', getValue)
  window.open("page2.html");
  // window.open("https://www.google.com/");
}

function loadDynamicData()
{
    var globalVar = sessionStorage.getItem('value')

    var para=document.getElementById("paraId");
    console.log(para);
    para.innerText=globalVar+" : value from myFunction1 (Click Event)";


    var secPage2 = document.getElementById("page2Section");
        var headingJS2 = document.createElement("h4");
        headingJS2.innerText=" This is dynamic heading";
        secPage2.appendChild(headingJS2);
    console.log(para);

}

Function 参数未传递。如何正确地将参数传递到另一个 JavaScript 文件的 function 中？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-13 20:26:27

Function 参数未传递。 如何正确地将参数传递到另一个 JavaScript 文件的 function 中？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-13 20:26:27

Function 参数未传递。如何正确地将参数传递到另一个 JavaScript 文件的 function 中？

解决方案1
2 已采纳 2020-06-13 20:26:27