如何从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，反之亦然

回答

相关问题