如何從JavaScript值傳遞給HTML，反之亦然

-1

獲取配對值的列表 - 每個值包括名稱和編號
呈現與用戶一個按鈕列表，每個按鈕顯示名稱 - 值對中的名稱，所以如果我得到10對，則當用戶單擊所選名稱時，我將呈現10個按鈕
，按鈕調用帶有名稱值的JS匹配。

我對HTML很陌生，所以這部分對我來說是有問題的。在這個階段，頁面不需要很好看，只需正確運行即可。

<html> 

<head> </head> 

<body> 
    <script> 
    var pairs = [ 
     { 
      "name_1": 123 
     }, 
     { 
      "name_2": 983 
     }, 
     { 
      "name_3": 567 
     } 
    ]; 

    function present_buttons(pairs) { 
     for (var i in pairs) { 
      console.log(`index = ${i}`); 
      console.log(`name = ${pair[i].name}`); 
      console.log(`value = ${pair[i].value}`); 
      // send info the the HTML section, so present proper names on buttons 
      // make sure to hook matching value for each button so it will be sent correctly to the use_value function later on 
     } 
    } 

    function use_value(value) { 
     // do something with the value triggered by the matching name button 
    } 
    </script> 
    <!-- 
get names to present on buttons from the present_buttons() 
when a button is clicked , send the matching value to the use_value() function 

--> 
</body> 

</html>

來源

2017-04-02 Gadi Ben Amram

什麼是你的問題？ – Rob

感謝您對幫助Rob的關注，@Matansh回答爲我解決了如何解決這個問題。 –

試試這個：

<html> 
    <head></head> 
    <body> 
     <script> 
      var pairs = [ 
       { "name_1" : 123 } , 
       { "name_2" : 983 } , 
       { "name_3" : 567 } 
      ]; 

      for (var i = 0; i < pairs.length; i++) { 
       var button = document.createElement('button'); 
       var pair = pairs[i]; 

       button.innerHTML = Object.keys(pair)[0]; 
       button.addEventListener('click', function (pair) { 
        use_value(pair); 
       }.bind(this, pair)); 

       document.getElementsByTagName('body')[0].appendChild(button); 
      } 


      function use_value(value) { 

       // do something with the value triggered by the matching name button 
      } 
     </script> 
    </body> 
</html>

來源

2017-04-02 10:46:41 Matansh

非常感謝:-) –

樂意幫忙:) – Matansh

如何從JavaScript值傳遞給HTML，反之亦然

回答

相關問題