Highlight Divs that Match Selected Date

Question

I have a function were a user can add a note, and above the note the date of which the note was added is displayed. I want the user to be able to search for a certain note by its date and the notes that match the select values will be highlighted. I am not sure how to do this because there could be multiple notes with the same date.

Code:

var noteCount = 0;
addNote = function(style) {

  const notesBox = document.getElementById('notesBox');
  var noteBoxes = document.createElement('div');
      textarea = document.createElement('textarea'),
      remove = document.createElement('button'),
      today = new Date();

  var txtElement = document.createElement('p');
  var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes();
      txtElement.innerHTML = dateString;
      txtElement.setAttribute('class', style);
      txtElement.className = 'dateTxt';
      txtElement.setAttribute('id', style);
      txtElement.id = 'note ' + noteCount + ' date';
      txtElement.setAttribute('data-month', today.getMonth() + 1);
      txtElement.setAttribute('data-year', today.getFullYear());
  // div that holds each note and remove button and date
  notesBox.appendChild(noteBoxes);
  noteBoxes.setAttribute('class', style);
  noteBoxes.className = 'noteBoxes';
  noteBoxes.setAttribute('id', style);
  noteBoxes.id = 'note box ' + noteCount;
  noteBoxes.appendChild(txtElement);
  noteBoxes.appendChild(textarea);
  noteBoxes.appendChild(remove);

  // note that is added
  textarea.setAttribute('class', style);
  textarea.className = 'notesE';
  textarea.setAttribute('id', style);
  textarea.id = 'note' + noteCount;

  // button to remove note
  remove.setAttribute('class', style);
  remove.className = 'removeNote';
  remove.setAttribute('id', style);
  remove.id = '-Note' + noteCount;
  remove.onclick = function () {
    // confirm alert dialog
    // deletes the note if user selects 'OK'
    if (confirm("Are you sure you want to delete this note?") == true) {
      // removes the noteBoxes div of which the button clicked is in.
      this.parentElement.remove();
    }
  }
  noteCount++;
  console.log(textarea.id);


    var month = document.getElementById('selectMonth');
    var year = document.getElementById('selectYear');
    var searchDate = document.getElementById('searchDate');


    searchDate.onclick = function () {
      var currentMonth = txtElement.getAttribute('data-month');
      var currentYear = txtElement.getAttribute('data-year');
      if (currentMonth === month.value & currentYear === year.value) {
        // ones that match stay, if not they are not displayed.
        
        console.log('found date');
      }
      else {
        // if note with selected date is not found, display this message
        var mess = document.getElementById('Message');
        mess.innerHTML = 'No notes were found for that date.';
        setTimeout(function(){
          mess.remove();
        }, 5000);
      }

    }

}

<div id="custNotes" style="width: 550px; margin: 0 auto;">
          <h3><!-- Customer Value--> Notes</h3>
          <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>
          <select id="selectMonth">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
          </select>
          <select id="selectYear">
            <option>2017</option>
            <option>2018</option>
          </select>
          <button onclick="dateSearch()" id="searchDate">search</button>
          <p id="Message"></p>
          <div class="notesScroll"  style="width: 550px; background-color: #606060; margin: 0 auto;">
            <div id="notesBox" style="padding: 10px; width: 510px;">
              <div id="noteBoxes">
              </div>
            </div>
          </div>
        </div>

Answer 1

Use data-* to tag each note, when you search select all note which match the tag.

The data-* attributes is used to store custom data private to the page or application.

Below is an example;

function dateSearch() {
	var year_el = document.getElementById("selectYear");
  var month_el = document.getElementById("selectMonth");
	var year_val = year_el.options[year_el.selectedIndex].value;
	var month_val = month_el.options[month_el.selectedIndex].value;
  
  var search_val = month_val + '/' + year_val;

	document.querySelectorAll('[data-date]').forEach(function (element) {
		if (element.getAttribute('data-date').indexOf(search_val) !== -1) {
			element.classList.add('grey');
		} else {
			element.classList.remove('grey');
		}
	});
}

.yellow {
    background-color: yellow;
}
.green {
    background-color: green;
}
.pink {
    background-color: pink;
}
.red {
    background-color: red;
}
.grey {
    background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<select id="selectMonth">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>
<select id="selectYear">
    <option>2017</option>
    <option>2018</option>
    <option>2019</option>
</select>
<button onclick="dateSearch()" id="searchDate">search</button>
<div class="row">
    <div class="col-md-3 yellow" data-date="22/12/2017">
        <p>22/12/2017</p>
    </div>
    <div class="col-md-3 pink" data-date="22/12/2018" >
        <p>22/12/2018</p>
    </div>
    <div class="col-md-3 green" data-date="22/12/2019" >
        <p>22/12/2019</p>
    </div>
    <div class="col-md-3 red" data-date="22/12/2017" >
        <p>22/12/2017</p>
    </div>
</div>

Answer 2

The things you need to change:

• Since there are multiple notes, you need a loop to iterate through each to log exactly how many notes are there for that date.

var elements = document.getElementsByClassName('dateTxt'); for (var i = 0; i < elements.length; ++i) { var item = elements[i]; item.parentElement.style.background="#606060"; ...

• Instead of mess.remove() on setTimeout which actually deletes the element ,it will show an error the next time you try to search and can't display the appropriate message, we set the innerHTML to "".

  mess.innerHTML = ""

• To highlight the matching notes just add this to your if condition when it matches:

  item.parentElement.style.background="green";

• You probably should also remove onclick="dateSearch()" from your searchDate container since, if no notes are added it will give an error. And you're making use of searchDate.onclick anyways.

var noteCount = 0;
addNote = function(style) {

  const notesBox = document.getElementById('notesBox');
  var noteBoxes = document.createElement('div');
  textarea = document.createElement('textarea'),
    remove = document.createElement('button'),
    today = new Date();

  var txtElement = document.createElement('p');
  var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes();
  txtElement.innerHTML = dateString;
  txtElement.setAttribute('class', style);
  txtElement.className = 'dateTxt';
  txtElement.setAttribute('id', style);
  txtElement.id = 'note ' + noteCount + ' date';
  txtElement.setAttribute('data-month', today.getMonth() + 1);
  txtElement.setAttribute('data-year', today.getFullYear());
  // div that holds each note and remove button and date
  notesBox.appendChild(noteBoxes);
  noteBoxes.setAttribute('class', style);
  noteBoxes.className = 'noteBoxes';
  noteBoxes.setAttribute('id', style);
  noteBoxes.id = 'note box ' + noteCount;
  noteBoxes.appendChild(txtElement);
  noteBoxes.appendChild(textarea);
  noteBoxes.appendChild(remove);

  // note that is added
  textarea.setAttribute('class', style);
  textarea.className = 'notesE';
  textarea.setAttribute('id', style);
  textarea.id = 'note' + noteCount;

  // button to remove note
  remove.setAttribute('class', style);
  remove.className = 'removeNote';
  remove.setAttribute('id', style);
  remove.id = '-Note' + noteCount;
  remove.onclick = function() {
    // confirm alert dialog
    // deletes the note if user selects 'OK'
    if (confirm("Are you sure you want to delete this note?") == true) {
      // removes the noteBoxes div of which the button clicked is in.
      this.parentElement.remove();
    }
  }
  noteCount++;
  console.log(textarea.id);


  var month = document.getElementById('selectMonth');
  var year = document.getElementById('selectYear');
  var searchDate = document.getElementById('searchDate');

  searchDate.onclick = function() {
    var elements = document.getElementsByClassName('dateTxt');
    for (var i = 0; i < elements.length; ++i) {
      var item = elements[i];
      item.parentElement.style.background="#606060";
      var currentMonth = item.getAttribute('data-month');
      var currentYear = item.getAttribute('data-year');
      if (currentMonth === month.value && currentYear === year.value) {
        // ones that match stay, if not they are not displayed.
        item.parentElement.style.background="green";
        console.log('found date');
      } else {
        // if note with selected date is not found, display this message
        var mess = document.getElementById('Message');
        mess.innerHTML = 'No notes were found for that date.';
        setTimeout(function() {
          mess.innerHTML = "";
        }, 5000);
      }
    }

  }


}

<div id="custNotes" style="width: 550px; margin: 0 auto;">
  <h3>
    <!-- Customer Value-->Notes</h3>
  <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>
  <select id="selectMonth">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
          </select>
  <select id="selectYear">
            <option>2017</option>
            <option>2018</option>
          </select>
  <button id="searchDate">search</button>
  <p id="Message"></p>
  <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;">
    <div id="notesBox" style="padding: 10px; width: 510px;">
      <div id="noteBoxes">
      </div>
    </div>
  </div>
</div>