Search code examples
javascriptjqueryhtmlbootstrap-4popover

How can buttons be targeted using id instead of index?

I simply want to change the background-color of the buttons using the ID instead of index because of maintaining purposes. Any suggestion how this could be done?

Run the code from jsfiddle: https://jsfiddle.net/p6kuf0zv/4/

or look the code at the code-snippet:

// On click on a button, a popover menu will show up
      $("[data-toggle=popover]").popover({
        html: true,
        sanitize: false,
        trigger: 'focus',
        content: function() {
          return $('#popover-content').html();
        }
      });
      // Creates data items inside local storage with keyName and keyValue
      var saveColorPref = (keyName, keyValue) => {
        localStorage.setItem(keyName, keyValue);
        return keyValue;
      }
      // Retrieves data items from local storage
      var getColorPref = (keyName) => {
        return localStorage.getItem(keyName);
      }
      // How can the code bellow be changed to make use of ID instead of index?
      var targetBtn;
      function setColor(keyValue) {
        var keyName = $(targetBtn).index();
        console.log(keyName, keyValue);
        $(targetBtn).css("background", saveColorPref(keyName, keyValue));
      }
      $('.myBtn').each((keyName, item) => {
        $(item).click((e) => {
          targetBtn = e.target;
        });
      });
.demo1{
        background-color: red;
      }
      .demo2{
        background-color: green;
      }
      .demo3{
        background-color: blue;
      }
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

  <body>
    <button class="myBtn" id="1" data-toggle="popover" data-placement="bottom" data-html="true">1</button>
    <button class="myBtn" id="2" data-toggle="popover" data-placement="bottom" data-html="true">2</button>
    <div id="popover-content" class="hide">
      <button class="demo1" onClick="setColor('red')">Red</button>
      <button class="demo2" onClick="setColor('green')">Green</button>
      <button class="demo3" onClick="setColor('blue')">Blue</button>
      <span class="close">&times;</span>
    </div>
   </body>

Solution

  • In response to:

    How can buttons be targeted using id instead of index?

    Change the setColor function as shown below:

    Before:

    function setColor(keyValue) {
  var keyName = $(targetBtn).index();
  console.log(keyName, keyValue);
  $(targetBtn).css("background", saveColorPref(keyName, keyValue));
}

    After:

    function setColor(keyValue) {
  var keyName = $(targetBtn).attr('id');
  console.log(keyName, keyValue);
  $(targetBtn).css("background", saveColorPref(keyName, keyValue));
}

    The SO snippet is throwing this error:

    Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

    So you don't see the button color change. This works in your jsfiddle though.