0

I have this code which highlights the selected table cell in green color by default.

I am seeking help with a function where there will be three buttons for three different colors, so when I click one of these buttons, the default highlight color will change to that selected color. I have fiddle here too : https://jsfiddle.net/eLb9x2pp/ Any help will be appreciated, I am not very familiar with javascript. And this is what I tried and did so far. but here highlighting doesn't work because of changes I made. https://jsfiddle.net/r94m7o8c/

Edited by Mati_1

2
Contributors
5
Replies
44
Views
2 Weeks
Discussion Span
Last Post by Mati_1
2

Hi,

you can use plain javascript:

// variables
var buttons = document.getElementsByClassName('btn_colors');
var numbers = document.querySelectorAll('.column > div');
var current_color = document.getElementById('green').getAttribute('data-color');

// listener for button clicks
for (let i = 0, c = buttons.length; i < c; i++)
  buttons[i].addEventListener('click', set_color, {
    passive: false
  });

// listener for number cells
for (let i = 0, c = numbers.length; i < c; i++)
  numbers[i].addEventListener('click', set_bg, {
    passive: false
  });

// functions
function set_color(event) {
  event.preventDefault();
  current_color = this.getAttribute('data-color');
}

function set_bg(event) {
  if(this.classList.contains('clicked'))
  {
    this.classList.remove('clicked');
    this.style.backgroundColor = 'transparent';
    return ;
  }

  this.style.backgroundColor = current_color;
  this.classList.add('clicked');
}

And in the HTML part just add data-color="COLOR" and class="btn_colors" to the buttons, where COLOR is the name or the code to assign to the backgroundColor property:

<p>
    <input class="btn_colors" data-color="#007FFF" type="button" name="blue" id="blue" value="Blue" />
    <input class="btn_colors" data-color="#F2B400" type="button" name="yellow" id="yellow" value="Yellow" />
    <input class="btn_colors" data-color="#66B447" type="button" name="green" id="green" value="Green" />
</p>

Live example: https://jsfiddle.net/tsLgtzkv/

In your case, in your example you were not loading JQuery, and not setting to run on onDomready. In my example there is no dependency, but it should run in the body, after all the HTML, to allow the browser to complete the parsing.

Edited by cereal

Votes + Comments
Excellent!
0

I am sorry, but What am I doing wrong here? it works on fiddle, when I try it on html, it doesn't work. I couldn't figure it out. I just copy & pasted, didn't change anything.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="jquery-2.1.4.js"></script>

<style type="text/css">
body {
font-family:Arial, sans-serif;
}

#wrapper {

margin-left:300px;
}

.column {
  float: left;
}

.column div {
  border: 1px solid #000;
  padding: 4px;
  margin: 2px;
  width: 15px;
  height: 15px;
  text-align: center;
  cursor: pointer;
}

</style>

<title>Example</title>

        <script type='text/javascript'>

// variables
var buttons = document.getElementsByClassName('btn_colors');
var numbers = document.querySelectorAll('.column > div');
var current_color = document.getElementById('green').getAttribute('data-color');

// listener for button clicks
for (let i = 0, c = buttons.length; i < c; i++)
  buttons[i].addEventListener('click', set_color, {
    passive: false
  });

// listener for number cells
for (let i = 0, c = numbers.length; i < c; i++)
  numbers[i].addEventListener('click', set_bg, {
    passive: false
  });

// functions
function set_color(event) {
  event.preventDefault();
  current_color = this.getAttribute('data-color');
}

function set_bg(event) {
    if(this.classList.contains('clicked'))
  {
    this.classList.remove('clicked');
    this.style.backgroundColor = 'transparent';
    return ;
  }

  this.style.backgroundColor = current_color;
  this.classList.add('clicked');
}

</script>

</head>

<body>

<div id="wrapper">

 <div id="Content">
  <p>
    <input class="btn_colors" data-color="#007FFF" type="button" name="blue" id="blue" value="Blue" />
    <input class="btn_colors" data-color="#F2B400" type="button" name="yellow" id="yellow" value="Yellow" />
    <input class="btn_colors" data-color="#66B447" type="button" name="green" id="green" value="Green" />
  </p>
  <div class="column">
    <div>20</div>
    <div>60</div>
  </div>
  <div class="column">
    <div>72</div>
    <div>71</div>
  </div>
  <div class="column">
    <div>88</div>
    <div>87</div>
  </div>
  <div class="column">
    <div>64</div>
    <div>53</div>
  </div>
  <div class="column">
    <div>90</div>
    <div>79</div>
  </div>
  <div class="column">
    <div>54</div>
    <div>73</div>
  </div>
  <div class="column">
    <div>74</div>
    <div>63</div>
  </div>
  <div class="column">
    <div>98</div>
    <div>57</div>
  </div>
  <div class="column">
    <div>74</div>
    <div>63</div>
  </div>

</body>

</html>

Edited by Mati_1

2

You're welcome :)

As I said the script block must be placed at the bottom of the <body> block, after all the other codes, so:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style type="text/css">
    body {
      font-family:Arial, sans-serif;
    }

    #wrapper {
      margin-left:300px;
    }

    .column {
      float: left;
    }

    .column div {
      border: 1px solid #000;
      padding: 4px;
      margin: 2px;
      width: 15px;
      height: 15px;
      text-align: center;
      cursor: pointer;
    }

  </style>
</head>
<body>

  <div id="wrapper">
   <div id="Content">

      <p>
        <input class="btn_colors" data-color="#007FFF" type="button" name="blue" id="blue" value="Blue" />
        <input class="btn_colors" data-color="#F2B400" type="button" name="yellow" id="yellow" value="Yellow" />
        <input class="btn_colors" data-color="#66B447" type="button" name="green" id="green" value="Green" />
      </p>

      <div class="column">
        <div>20</div>
        <div>60</div>
      </div>
      <div class="column">
        <div>72</div>
        <div>71</div>
      </div>
      <div class="column">
        <div>88</div>
        <div>87</div>
      </div>
      <div class="column">
        <div>64</div>
        <div>53</div>
      </div>
      <div class="column">
        <div>90</div>
        <div>79</div>
      </div>
      <div class="column">
        <div>54</div>
        <div>73</div>
      </div>
      <div class="column">
        <div>74</div>
        <div>63</div>
      </div>
      <div class="column">
        <div>98</div>
        <div>57</div>
      </div>
      <div class="column">
        <div>74</div>
        <div>63</div>
      </div>

    </div>
  </div>

  <script type='text/javascript'>

    // variables
    var buttons = document.getElementsByClassName('btn_colors');
    var numbers = document.querySelectorAll('.column > div');
    var current_color = document.getElementById('green').getAttribute('data-color');

    // listener for button clicks
    for (let i = 0, c = buttons.length; i < c; i++)
      buttons[i].addEventListener('click', set_color, {
        passive: false
      });

    // listener for number cells
    for (let i = 0, c = numbers.length; i < c; i++)
      numbers[i].addEventListener('click', set_bg, {
        passive: false
      });

    // functions
    function set_color(event) {
      event.preventDefault();
      current_color = this.getAttribute('data-color');
    }

    function set_bg(event) {
      if(this.classList.contains('clicked'))
      {
        this.classList.remove('clicked');
        this.style.backgroundColor = 'transparent';
        return ;
      }

      this.style.backgroundColor = current_color;
      this.classList.add('clicked');
    }

  </script>

</body>
</html>

In this position the browser has already parsed all the elements of the page and the script can work fine.

Edited by cereal

Votes + Comments
Beautiful
1

Thanks again. I didn't know it'd make such difference.

Votes + Comments
You're welcome!
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.