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

Question

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

我的算法基本上是这样的，用户选择天气模型、NAM、HRRR 或 GFS - 然后选择一个扇区、CONUS、Northeast、USA 等 - 最后选择一个模拟参数，例如模拟雷达、云封面等（其中每一个都由按下按钮的值捕获，并分配给一个使用 js 连接 URL 的变量）。

问题是，我的 JavaScript 只能从一个按钮收集一个值，所以我必须 copy/paste 每个按钮的代码。我希望此代码可重复用于每个按钮。我在 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() 不关心你点击了哪个按钮，它总是 return 具有该 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

为此，您可以尝试这样的操作：

"document.querySelectorAll("button") --> 抓取所有 "buttons" 1.1 这将创建一个 NodeList （你可以像数组一样迭代，但与某些浏览器存在一些不兼容） 1.2 "fix" 针对此不兼容性，使用 Array.protopype 将此 NodeList 设置为 Array。让您的 NodeList 带有 let buttons = document.querySelectorAll("button")，并将其转换为数组，例如：let buttonsArray= Array.prototype.slice.call(按钮)
所有 "buttons" 到位后，您可以按示例使用 forEach() 方法 。访问回调函数中的每一项

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

let buttons = document.querySelectorAll("button")
let url = ""

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

希望对您有所帮助。

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

I need multiple buttons to conduct the same function - to concatenate a URL in JavaScript

javascript

weather

button