Мне нужно несколько кнопок для выполнения одной и той же функции - для объединения URL-адреса в JavaScript - PullRequest
Новая
       78

Мне нужно несколько кнопок для выполнения одной и той же функции - для объединения URL-адреса в JavaScript

0 голосов
/ 20 июня 2020

В настоящее время я пишу код для своего веб-сайта, который будет отображать данные модели погоды на основе выбранных пользователем параметров. Каждый выбор создает URL-адрес, который будет ссылаться на изображение из NOAA - данные модели.

Мой алгоритм в основном таков: пользователь выбирает модель погоды, NAM, HRRR или GFS - затем выбирается сектор, КОНУС, Северо-восток, США и т.д. c - наконец, выбирается моделируемый параметр, например Моделируемый радар, облачный покров и т. Д. c. (каждый из них фиксируется значением кнопки pu sh и назначается переменной, которая объединяет URL-адрес с использованием js).

Проблема в том, что мой 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>

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Для этой цели вы можете попробовать что-то вроде этого:

  1. "document.querySelectorAll (" button ") ->, чтобы захватить все" кнопки «1.1 Это создаст NodeList (который можно выполнять как массив, но есть некоторые несовместимости с некоторыми браузерами). 1.2« Исправление »этой несовместимости устанавливает для этого NodeList значение Array , используя Array.protopype . Имея свой NodeList с let buttons = document.querySelectorAll ("button") , и преобразовав его в массив, например: let buttonsArray = Array.prototype.slice.call (buttons)

  2. Когда все «кнопки» на месте, вы можете использовать для примера метод forEach () . Доступ к каждому элементу в функции обратного вызова

3 - И, наконец, в каждую кнопку, добавив прослушиватель событий , который будет объединять ваш URL-адрес всякий раз, когда кнопка нажал. 

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

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

Надеюсь, это поможет.

0 голосов
/ 20 июня 2020

ID должны быть уникальными. document.getElementById() не важно, какую кнопку вы нажали, он всегда будет возвращать первый элемент с этим идентификатором.

Функции должны принимать параметры, которые сообщают им, какая кнопка была нажата. Затем вы можете передать 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>
...