html düğmesi güncellemesi yapmak için js'yi kullanın. Tag onchange işlevi

Programlamayı ve JS'yi sıfırdan öğreniyorum. Şimdiye kadar geldikten sonra, bir sonraki parçamı anlayamayacağımı biraz garip hissediyorum. Kodu çalıştırmak, temel amacımın ne olduğunu size gösterecektir. Sadece yeniden düzenlenmiş veriler gösteriliyor. Ancak, fare üzerindeki milleri azaltmak için açılan menüde bir sonraki seçeneğe gitmek için NEXT ve PREVIOUS düğmelerini eklemeye çalışıyorum. NEXT tuşunun kodlanmasıyla başarıya ulaşmaya çalıştığım için henüz ÖNCEDEN düğme için herhangi bir kod/işlev yok. Daha fazla rehberlik etmek için yorumlarımı kodda kullanabilirsiniz. Ve jquery kullanmıyorum. Numaraların (mağaza numaraları) mükemmel ardışık olmadığını unutmayın. Dolayısıyla "+ 1" gerçekten iyi bir fikir değildir. Nasıl Kodlanır Düğmeleri seçme seçeneklerini ileri ve geri arasında gezinmek için? Teşekkürhtml düğmesi güncellemesi yapmak için js'yi kullanın. Tag onchange işlevi

<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>

GÜNCELLEME: user2314727 için 2016 sayesinde 5 Nisan i "seçeneğini" bir dizi ve endeksli öğeleri olarak 's "seçenekler" hareket gibi hareket edebilir öğrenmek başardı. ve dün gece google yardımıyla tekrar kodumla uğraşırken, aşağıdaki çözümle geldim. ".value" anahtar kelimesini @ user ... 'nın katkısına eklemek için, searchObjAry() func'deki seçeneğin değerini işleyebildim.
Sadece Düzeltmek için sorun, Önceki Düğme döngüsünü listenin altına geri döndürmek ve NextButton'un ileriye doğru yaptığı şekilde arka arkaya tekrar tekrar gitmek içindir.

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); 
    } 

}

kaynak

2016-03-30 theUnlearned

Belki bu (nextButton tıklayarak açılan listedeki bir sonraki etiketi seçin) yardımcı olacaktır:

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>

kaynak

2016-03-30 21:58:41 user2314737

teşekkürler. İlerleyen, yarısı tamamlanmış olsa da. Düğme işlevi için kod çalışır, numaralı telefona atıfta bulunduğunuzu öğrendim ve "[0] ..." ile başvuruda bulunabiliyordum. Sonra neyin eksik olduğunu öğrendim "request.options [request.selectedIndex + = 1] .value" ifadesinde yer alan ".selectedIndex" ifadesinden sonra ".value" ifadesi kullanılır. Böylece bir sonraki seçeneğe erişilir ve ayrıca bu seçeneğin değerini yakalar ve işlenir. searchObjAry() func. Şimdi sadece soru, "Döngü" işlevini ilerideki İleri döngüleri tersine çevirmek için ÖncekiButton işlevini almaktır. Yukarıdaki güncellemeye bakın. – theUnlearned

Merhaba user2314737, Yaklaşık iki ay oldu ve bu soru gibi görünüyor ve sorunları zaman vardı. Bir döngü kodunun son maddeyi bir diğerine bağladığına ve bu durumun o kadar da zor olmadığı sanırım. Ama benim güncellemeyi yaptım, "değer" anahtar sözcüğü, düğmeye her basıldığında bir liste göstermek için kod işlenmesinden eksik olan şeydi. Sıralı/sırasız listelerin diziler olarak nasıl ele alınabileceğini gösterme yardımınız için teşekkürler. – theUnlearned

html düğmesi güncellemesi yapmak için js'yi kullanın. Tag onchange işlevi

cevap

İlgili konular