我需要多个按钮来执行相同的功能 - 在 JavaScript 中连接一个 URL

Question

我目前正在为我的网站编写一个代码，该代码将根据用户选择的选项显示天气模型数据。每个选择都会构建一个 URL，该 URL 将链接到来自 NOAA 的图像 - 模型数据。

我的算法基本上是这样的，用户选择一个天气模型，NAM，HRRR或GFS - 然后选择一个扇区，CONUS，东北，美国等 - 最后，选择一个模拟参数，如模拟雷达，云量等(每个都被按钮按下的值捕获，并分配给一个变量，该变量使用js连接URL(。

问题是，我的 JavaScript 只能从一个按钮收集一个值，所以我必须复制/粘贴每个按钮的代码。我希望此代码可为每个按钮重复使用。我对js不是很全面，所以非常感谢任何帮助或想法！

这是我到目前为止拥有的非常简单的代码：

function sectorFuct() {
var sector = document.getElementById("sectorbutton").value;
console.log(sector);
}
function modelFuct() {
var model = document.getElementById("modelButton").value;
console.log(model);
}
function paramFuct() {
var param = document.getElementById("parambutton").value;
console.log(param);
var sector = document.getElementById("sectorbutton").value;
var model = document.getElementById("modelButton").value;
var fullURL = ('https://mag.ncep.noaa.gov/data/' + model + '/12/' + model + '_' + sector + '_006_' + param + '.gif');
console.log(fullURL);
}
function getData() {
var param = document.getElementById("parambutton").value;
var sector = document.getElementById("sectorbutton").value;
var model = document.getElementById("modelButton").value;
var fullURL = ('https://mag.ncep.noaa.gov/data/' + model + '/12/' + model + '_' + sector + '_006_' + param + '.gif');
var src = fullURL;
show_image(fullURL, 500, 400, "Model Data");
}
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}

<!--- select nam -> conus ->  850mb-700mb Thickness and img to view data --->
<button type="submit" ; value="nam" ; onClick="modelFuct()" ; id="modelButton" ; style="vertical-align:middle;"> nam </button><br>
<button type="submit" ; value="hrrr" ; onClick="modelFuct()" ; id="modelButton" ; style="vertical-align:middle;"> hrrr </button><br>
<button type="submit" ; value="gfs" ; onClick="modelFuct()" ; id="modelButton" ; style="vertical-align:middle;"> gfs </button><br>
<button type="submit" ; value="conus" ; onClick="sectorFuct()" ; id="sectorbutton" ; style="vertical-align:middle;"> Northeast US </button><br>
<button type="submit" ; value="850_700_thick" ; onClick="paramFuct()" ; id="parambutton" ; style="vertical-align:middle;"> 850mb-700mb Thickness </button><br>
<button onclick="getData();">img</button>

Answer 1

ID 必须是唯一的。document.getElementById()不在乎你点击了哪个按钮，它将始终返回具有该 ID 的第一个元素。

函数应该采用参数，这些参数告诉它们单击了哪个按钮。然后，您可以将this作为参数传递，以表示单击的按钮。

然后，您可以将单击的按钮的值保存在全局变量中，这些变量由getData()函数使用。

此外，您不需要使用;分隔 HTML 元素中的属性。

var sector;
var model;
var param;
function sectorFuct(button) {
sector = button.value;
console.log(sector);
}
function modelFuct(button) {
model = button.value;
console.log(model);
}
function paramFuct(button) {
param =  button.value;
console.log(param);
}
function getData() {
if (!param || !sector || !model) {
alert("Select a sector, model, and parameter first");
return;
}
var fullURL = ('https://mag.ncep.noaa.gov/data/' + model + '/12/' + model + '_' + sector + '_006_' + param + '.gif');
var src = fullURL;
show_image(fullURL, 500, 400, "Model Data");
}
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}

<!--- select nam -> conus ->  850mb-700mb Thickness and img to view data --->
<button type="submit" value="nam" onClick="modelFuct(this)" style="vertical-align:middle;"> nam </button><br>
<button type="submit" value="hrrr" onClick="modelFuct(this)" style="vertical-align:middle;"> hrrr </button><br>
<button type="submit" value="gfs" onClick="modelFuct(this)" style="vertical-align:middle;"> gfs </button><br>
<button type="submit" value="conus" onClick="sectorFuct(this)" style="vertical-align:middle;"> Northeast US </button><br>
<button type="submit" value="850_700_thick" onClick="paramFuct(this)" style="vertical-align:middle;"> 850mb-700mb Thickness </button><br>
<button onclick="getData();">img</button>

Answer 2

为此，您可以尝试如下操作：

1. "document.querySelectorAll("button"(--> 抓取所有"按钮" 1.1 这将创建一个NodeList(您可以像数组一样迭代，但与某些浏览器存在一些不兼容( 1.2 这种不兼容性的"修复"是使用Array.protopype将此 NodeList 设置为数组。 将 NodeList 与 let button= document.querySelectorAll("button"(一起使用，并将其转换为数组，例如：let buttonsArray= Array.prototype.slice.call(buttons(

2. 所有"按钮"都到位后，您可以按示例使用Each(( 方法。 访问回调函数中的每个项

3 - 最后在每个按钮中添加一个事件侦听器，每当单击按钮时，该侦听器都会连接您的 URL。

let buttons = document.querySelectorAll("button")
let url = ""
buttons.forEach((item) => {
item.addEventListener("click", function() {
url = url + " " + item.value 
})
})

希望对您有所帮助。