gpt4 book ai didi

javascript - 将数据从 html.index 发送到 functions.js 文件

转载 作者:行者123 更新时间:2023-12-04 17:13:20 26 4
gpt4 key购买 nike

目前,我一直在处理 .html 文件,该文件需要将数据发送到具有函数的 javascript 文件。它看起来如下:

数据

let data = [
["ID1", "URL1"],
["ID2", "URL2"],
["ID3", "URL3"],
]

HTML 部分调用 javascript 函数文件

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Metabase Dashboard Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./src/carousel.js"></script>
</head>
<body onLoad="createFrames('test!')">
<button class="btn btn-primary " onclick=autoRun()>Start</button>
<button class="btn btn-primary " onclick=pause()>Pause</button>
</body>
</html>

被调用的函数

function createFrames(text) {
console.log(text);
for(var i in data)
prepareFrame(data[i][0], data[i][1]);
};

调用函数确实给我打印了测试!在带有 Mozilla 检查器的 .html 控制台上。但是,运行脚本的其余部分或实际使用数据变量作为主体 onLoad 函数的输入是行不通的。

  1. 这是怎么发生的?如何解决?
  2. 此外,不直接相关什么是在相关 .js/.yml/.json 之间加载文件的好方法,因为在 .html 中运行代码会返回未定义要求?

感谢您的帮助!

最佳答案

如果您能够修改您的方法并且想要定义将由 onload 函数使用的运行时数据,您可以尝试这样的方法。一旦 DOM 完全加载,这将使用匿名自执行函数运行 prepareFrame 命令。数据作为匿名函数的参数提供,其他函数可以在此范围内定义,以保持整个事情的整洁。

(function(data){
const d=document;

// emulate actual functions with simple console cmds for testing only
const prepareFrame=(a,b)=>{
console.log('prepareFrame(%s,%s)',a,b)
};
const autoRun=(e)=>{console.log(e.target);return true};
const pause=(e)=>{console.log(e.target);return true}


d.addEventListener('DOMContentLoaded',()=>{
data.forEach(a=>{
prepareFrame(a[0],a[1])
});

d.querySelectorAll('button[data-task]').forEach(bttn=>bttn.addEventListener('click',function(e){
switch(this.dataset.task){
case 'start':return autoRun(e);
case 'pause':return pause(e);
}
}))
})
})([
["ID1", "URL1"],
["ID2", "URL2"],
["ID3", "URL3"],
]);
<button class='btn btn-primary' data-task='start'>Start</button>
<button class='btn btn-primary' data-task='pause'>Pause</button>

例如:

<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='Content-Type' />
<meta content='utf-8' http-equiv='encoding' />

<title>Metabase Dashboard Carousel</title>
<link href='//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We' crossorigin='anonymous' />

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='./src/carousel.js'></script>
</head>

<body>
<button class='btn btn-primary' data-task='start'>Start</button>
<button class='btn btn-primary' data-task='pause'>Pause</button>
</body>

<script>
(function(data){
const d=document;

// emulate actual functions with simple console cmds for testing only
const prepareFrame=(a,b)=>{
console.log('prepareFrame(%s,%s)',a,b)
};
const autoRun=(e)=>{console.log(e.target);return true};
const pause=(e)=>{console.log(e.target);return true}


d.addEventListener('DOMContentLoaded',()=>{
data.forEach(a=>{
prepareFrame(a[0],a[1])
});

d.querySelectorAll('button[data-task]').forEach(bttn=>bttn.addEventListener('click',function(e){
switch(this.dataset.task){
case 'start':return autoRun(e);
case 'pause':return pause(e);
}
}))
})
})([
["ID1", "URL1"],
["ID2", "URL2"],
["ID3", "URL3"],
]);
</script>
</html>

关于javascript - 将数据从 html.index 发送到 functions.js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69083958/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com