Используйте js, чтобы сделать html кнопку update выберите функцию tag tag onchange

Question

Используйте js, чтобы сделать html кнопку update выберите функцию tag tag onchange

Учусь программированию и JS с нуля. Пройдя так далеко, чувствую себя немного неловко, потому что я не могу понять следующую часть. Выполнение кода как есть просто покажет вам, какова моя основная цель. Просто отображение переставленных данных. Но я пытаюсь добавить кнопки NEXT и PREVIOUS, чтобы перейти к следующей опции в выпадающем меню select, чтобы уменьшить мили на мышке. У меня пока нет кода / функции для ПРЕДЫДУЩЕЙ кнопки, так как я пытаюсь добиться успеха с кодированием кнопки СЛЕДУЮЩАЯ. Вы можете использовать мои комментарии в коде, чтобы вести вас дальше. И я не использую jquery. Имейте в виду, что числа (номера магазинов) не являются абсолютно последовательными. Следовательно, "+ 1" не очень хорошая идея. Как бы я кодировал кнопки для циклического перебора опций выбора тега взад и вперед? Спасибо

<body>

<p id="display1"><p/> <!--Used for debugging-->
<button type="button" onclick="previousButton()">Previous Store</button><!--Unused for now-->
<button type="button" onclick="nextButton()">Next Store</button>
<p>STORE NUMBER: <select id="mySelect" onchange="storeRequest()">
    <option value="00">00
    <option value="01">01
    <option value="02">02
    <option value="03">03
    <option value="04">04
    <option value="05">05
    <option value="06">06
    <option value="08">08
    <option value="56">56
</select>

</p>

<ol id="showpages"></ol>

</body>


<script type="text/javascript">



//function below is object constructor for Page objects.
function page(name, storeNumS) {
    this.name = name;
    this.storeNumS = storeNumS;
    this.storesArray = storeNumS.split(" ")
}


// Below are some test instances of the page objects
// JS-program's goal is to rearrange the data, then display it
var _001_01 = new page("_001_01", "01 03 05 56 06 08");
var _001_02 = new page("_001_02", "01 02 03 04 05 08");
var _002_01 = new page("_002_01", "02 03 04 56 06 08");
var _002_02 = new page("_002_02", "02 03 04 56 06 08");

// All the above pages in an array
var allPagesArray = [_001_01, _001_02, _002_01, _002_02]; 

// This function gets the <select> option, then runs the search function
var storeRequest = function() {
    var request = document.getElementById("mySelect").value;
    searchObjAry(request);
}


// Below is the function I'd like help in.
// Havent created a funciton for "Previous Button" since am 
//  trying to figure out "Next" Button currently.
//  Hence "previousButton()" doesn't exist yet

var nextButton = function(nextRqst) {
    var request = document.getElementById("mySelect").value;
    var nextRqst = request + 1; // or rather goto next option on select tag list
    searchObjAry(nextRqst);
    // Used the line below to test the function
    // document.getElementById("display1").innerHTML = nextRqst;
}


// The function below will search for requested store in every page,
//  then create a list and update the DOM
var searchObjAry = function (storeNum){
    var orderedPgList = "";
    var pageList = [];
    for (i = 0; i < allPagesArray.length; i++){

        for (j = 0; j < allPagesArray[i].storesArray.length; j++){
            if ( allPagesArray[i].storesArray[j] === storeNum){
                pageList.push(allPagesArray[i].name);

            }
        }       
    }
    for (k = 0; k < pageList.length; k++) {
        orderedPgList += "<li>"  + pageList[k] + "</li>";
    }
    document.getElementById("showpages").innerHTML = orderedPgList;

    return; // <-- still have no idea what "return" really does. Not sure if it'll mess anything up later.
}
</script>

ОБНОВЛЕНИЕ: 5 апреля 2016 года. Благодаря user2314727 я смог узнать, что "select" может действовать как массив, а его "options" действует как индексированные элементы. Прошлой ночью снова возился с моим кодом с помощью Google, я пришел с решением, приведенным ниже. добавив ключевое слово ".value" к вкладу @user..., я смог обработать значение параметра в функции searchObjAry().
Единственная оставшаяся проблема, которую нужно решить, - это заставить цикл PreviousButton вернуться к нижней части списка и многократно переходить назад так же, как NextButton работает вперед.

var nextButton = function() {
    var request = document.getElementById("mySelect");
    var nxtIndx = request.options[request.selectedIndex += 1].value;
    searchObjAry(nxtIndx);
}

var previousButton = function() {
    var request = document.getElementById("mySelect");
    var prevIndx = request.options[request.selectedIndex -= 1].value;
    if (prevIndx !== request[0]){
        searchObjAry(prevIndx);
    }else if (prevIndx === request[0]){
        prevIndx = request.options[request.selectedIndex = 8].value;
        searchObjAry(prevIndx);
    }

}

0

javascript onclick html-select onchange htmlbutton

Источник

user3839199 30 мар '16 в 21:39

1 ответ

Решение

Другие вопросы по тегам javascript onclick html-select onchange htmlbutton

user2314737 30 мар '16 в 21:58 2016-03-30 21:58 · Accepted Answer · 2016-03-30 21:58

Может быть, это поможет (выберите следующий тег в раскрывающемся списке, нажав на nextButton):

var request = document.getElementById("mySelect");
request.selectedIndex += 1; // goto next option on select tag list

//function below is object constructor for Page objects.
function page(name, storeNumS) {
  this.name = name;
  this.storeNumS = storeNumS;
  this.storesArray = storeNumS.split(" ")
}


// Below are some test instances of the page objects
// JS-program's goal is to rearrange the data, then display it
var _001_01 = new page("_001_01", "01 03 05 56 06 08");
var _001_02 = new page("_001_02", "01 02 03 04 05 08");
var _002_01 = new page("_002_01", "02 03 04 56 06 08");
var _002_02 = new page("_002_02", "02 03 04 56 06 08");

// All the above pages in an array
var allPagesArray = [_001_01, _001_02, _002_01, _002_02];

// This function gets the <select> option, then runs the search function
var storeRequest = function() {
  var request = document.getElementById("mySelect").value;
  searchObjAry(request);
}


// Below is the function I'd like help in.
// Havent created a funciton for "Previous Button" since am 
//  trying to figure out "Next" Button currently.
//  Hence "previousButton()" doesn't exist yet

var nextButton = function(nextRqst) {
  var request = document.getElementById("mySelect");
  request.selectedIndex += 1; // goto next option on select tag list

  searchObjAry(nextRqst);
  // Used the line below to test the function
  // document.getElementById("display1").innerHTML = nextRqst;
}


// The function below will search for requested store in every page,
//  then create a list and update the DOM
var searchObjAry = function(storeNum) {
  var orderedPgList = "";
  var pageList = [];
  for (i = 0; i < allPagesArray.length; i++) {

    for (j = 0; j < allPagesArray[i].storesArray.length; j++) {
      if (allPagesArray[i].storesArray[j] === storeNum) {
        pageList.push(allPagesArray[i].name);

      }
    }
  }
  for (k = 0; k < pageList.length; k++) {
    orderedPgList += "<li>" + pageList[k] + "</li>";
  }
  document.getElementById("showpages").innerHTML = orderedPgList;

  return; // <-- still have no idea what "return" really does. Not sure if it'll mess anything up later.
}

<p id="display1">
  <p/>
  <!--Used for debugging-->
  <button type="button" onclick="previousButton()">Previous Store</button>
  <!--Unused for now-->
  <button type="button" onclick="nextButton()">Next Store</button>
  <p>STORE NUMBER:
    <select id="mySelect" onchange="storeRequest()">
      <option value="00">00
      <option value="01">01
      <option value="02">02
      <option value="03">03
      <option value="04">04
      <option value="05">05
      <option value="06">06
      <option value="08">08
      <option value="56">56
    </select>

  </p>

  <ol id="showpages"></ol>