javascript - 未传递函数参数。如何正确地将参数传递给另一个 JavaScript 文件的函数？

问题描述

我想从另一个 JavaScript 文件调用一个file2Function(getValue)文件的函数以在浏览器中打开新页面并使用通过. 所以应该取值并且应该显示在. 但它显示为“未定义” 。请帮助我找出我在哪里做错了。谢谢你。(page2.js)(page1.js)myFunction1(e) into file2Function as file2Function(itemFromItems)file2Function(getValue)var itemFromItemspage2.htmlgetValue

// 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>

标签： javascripthtml

解决方案

问题是它globalVar是一个全局变量，但是您分配给它的值file2Function()只能在其范围内访问，这就是您得到的原因undefined，因为loadDynamicData()无法访问的新值globalVar。

您可以调用loadDynamicData()from并作为参数file2Function()传递，但是由于您需要在执行之前打开它，所以它不起作用。getValuepage2loadDynamicData()

我建议您将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);

}

如果要隐藏可以使用的值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);

}

javascript - 未传递函数参数。如何正确地将参数传递给另一个 JavaScript 文件的函数？

问题描述

解决方案

推荐阅读