How do I use window.find to change css style?

Question

Through a combination of AJAX and PHP, I put some text data in a span at the bottom of the page. Now I want to search this text for a string. My page is full of checkboxes, and their values are the strings I will search for.

Goal: Using a loop, cycle through the values of all checkboxes on the page. Search the page for each checkbox's value (ideally, within the text in the AJAX-informed span). If the checkboxes value is found, change that checkboxes CSS style color.

My code so far: I have a form full of checkboxes all named "comment" each with unique IDs:

<input type="checkbox" name="comment" id="hjl1" value="the comment." 
 onclick="createOrder()"><label for="hjl1" onclick="createOrder()" 
 title="comment"> onscreen text for this checkbox </label>

When triggered , using Javascript, I go through every checkbox in that form.

var comment=document.forms[0].comment;
var txt="";
var ii;
for (ii=0;ii<comment.length;ii++)
  {str=comment[ii].value;}

Now I want to insert window.find in that loop to check if that value is on my page.

 if (window.find) {
            var found = window.find (str);
            if (!found) { 
         document.getElementById("?????").style["color"] = "red";
           }
        }

The idea is that when the checkbox is checked, the javascript would search for the value "the comment." on page. If found, the checkbox label will add the CSS style color red.

Somehow, I want to combine these ideas, but there are so many problems. How do I get the element by ID in this loop? Can window.find search the text created by php in my span?

Would it be better to not use window.find at all?

var source = document.getElementsByTagName('html')[0].innerHTML;
var found = source.search("searchString");

I'm so confused and new. Please be patient. Thank you for reading this far.

Answer 1

try this as your function code

function loopy() {  
   var comment=document.forms[0].comment;
   var txt="";
   var ii;
   for (ii=0;ii<comment.length;ii++) {
    if (comment[ii].checked) {
        str=comment[ii].value;
        id = comment[ii].id;

        nextLabelId = comment[ii].nextSibling.id;


        if (window.find) {        // Firefox, Google Chrome, Safari
            var found = window.find (str);
            if (found == true) {
                // found string
                //comment[ii].style['outline']='1px solid red'; 
                document.getElementById(nextLabelId).className = 'selected';                
           } 
        } else {
            // this browser does not support find()
            alert('not supported');
        }
    }
  }
}

So, in order to get the checkbox id, you just add id = comment[ii].id in your loop.

To change the color, it's best to use class name and use styling in the css file. so if you want to change the label that is after the checkbox to red you will first find the label's id using nextSiblings and then add the .selected class name. Just remember that you need to remove the coloring if the user un-check the box

Regarding the usage of find() , not supported by all browser so this could be an issue and also not sure it will be able to find on the content you injected to the DOM by AJAX so this needs some testing.

I would suggest moving this code to jQuery as some features seems to be easier using their functionality.

Answer 2

I misunderstood at first, and wrote code to highlight text within the page.

Yes, window.find is fine to use for this as you only need to know if the value exists or not. It might behave a bit odd (scroll to bottom) when used in frames though.

Also, I added a function for your onClick , but I'm not sure if this is wanted. It will change color of the label if text if found when clicked (also).

Below is a small example:

 function checkThis(ele) { var str = ele.value; if (window.find) { var found = window.find(str); if (found) { var id = ele.getAttribute('id'); var lbl = document.querySelectorAll('label[for="' + id + '"]'); if (lbl) lbl[0].style.color = "red"; } } } window.onload = function() { var comment = document.form1.getElementsByTagName('input'); for (var x = 0; x < comment.length; x++) { if (comment[x].type == 'checkbox') { var str = comment[x].value; if (window.find) { var found = window.find(str); if (found) { var id = comment[x].getAttribute('id'); var lbl = document.querySelectorAll('label[for="' + id + '"]'); if (lbl) lbl[0].style.color = "red"; } } } } } 

 <form name="form1"> <input type="checkbox" name="comment" id="hjl1" value="the comment." onclick="checkThis(this);" /> <label for="hjl1" onclick="createOrder()" title="comment">onscreen text for this checkbox</label> <input type="checkbox" name="comment" id="hjl2" value="the comment2." onclick="checkThis(this);" /> <label for="hjl2" onclick="createOrder()" title="comment">onscreen text for this checkbox</label> <br/> <b>first comment.</b><br/> <b>other comment.</b><br/> <b>some comment.</b><br/> <b>the comment.</b><br/> <b>whatever comment.</b><br/> <b>not this comment.</b><br/> </form>