Changing highlight colors

Question

Mati_1 30 Newbie Poster

7 Years Ago

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/

javascript

Edited 7 Years Ago by Mati_1

2 Contributors
5 Replies
338 Views
7 Hours Discussion Span
Latest Post 7 Years Ago Latest Post by Mati_1

cereal 1,524 Nearly a Senior Poster

7 Years Ago

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 7 Years Ago by cereal

Mati_1 commented: Excellent! +0

cereal 1,524 Nearly a Senior Poster

7 Years Ago

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 7 Years Ago by cereal

diafol commented: Beautiful +15

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Mati_1 30 Newbie Poster · Answer 1 · 2017-09-07T22:03:41+00:00

Mati_1 30 Newbie Poster

7 Years Ago

Thanks @Cereal, this script works great.

Mati_1 30 Newbie Poster · Answer 2 · 2017-09-07T22:50:02+00:00

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>

Mati_1 30 Newbie Poster · Answer 3 · 2017-09-08T00:58:01+00:00

Mati_1 30 Newbie Poster

7 Years Ago

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

cereal commented: You're welcome! +15