Selections and radioing - JavaScript

Question

I have a list like this:

<ul>
    <li id="adm-thumb" onclick="javascript:addBanner('bowling.jpg');">
     <div class="adm-tick"></div>
       <img src="img/banners/bowling.jpg" /></li>

    <li id="adm-thumb" onclick="javascript:addBanner('kcc.jpg');">
     <div class="adm-tick"></div>
       <img src="img/banners/kcc.jpg" /></li>

    <li id="adm-thumb" onclick="javascript:addBanner('paintballing.png');">
     <div class="adm-tick"></div>
       <img src="img/banners/paintballing.png" /></li>
</ul>

<input id="bannername" type="text" />

When one item is clicked, the value inside the addBanner() will be added to the input field, however, I want one list to be selected (which is done by css to make it look like it has) when it is equal to the value of the input value. If the value is equals to the value in the addBanner value then the clicked item should have a red background.

e.g.

function addBanner(label)
{
 var Field = document.getElementById('bannername');
 Field.value = label;

 if(Field.value != label)
 {
     // I have no idea what to put here
     // assign a class to it? prevent others having the same when ONLY one must have the selected state
 }
}

Something like a div button that acts like a radio button.

Answer 1

The way the question is worded, it's a bit hard to understand exactly what you mean, but the code below should hopefully give you the results you are after:

var liList = document.getElementById('list').childNodes;  

for (var i = 0; i < liList.length; i++){
  liList[i].addEventListener('click',changeColor,false);
} 

function changeColor(e) {
  var el = e.target;

  var liList = document.getElementById('list').childNodes;  

  for (var i = 0; i < liList.length; i++){
    liList[i].backgroundColor = "black";
  } 
  el.style.backgroundColor = "red";
}

You will need to assign an id to the ul element, and you can remove the onClick calls from the li elements:

<ul id="list">
  <li><div class="adm-tick"></div><img src="img/banners/bowling.jpg" /></li>
  <li><div class="adm-tick"></div><img src="img/banners/kcc.jpg" /></li>
  <li><div class="adm-tick"></div><img src="img/banners/paintballing.png" /></li>
</ul>

You may want to read up on Javascript event handling as well

Answer 2

You can modify the addBanner function to include the list item that was clicked. Then inside the function remove the class or style from all list elements first. Then apply the required class to the clicked element.

The list items would become:

<li onclick="javascript:addBanner('bowling.jpg', this);"> .. </li>

The addBanner function now has two parameters, the second one being the list element that was clicked:

/* CSS */
.highlighted {
    background-color: red;
}

/* Javascript */
function addBanner(label, clickedItem) {
    var listItems = document.getElementsByTagName("li");
    // clear all existing classes
    for(var i = 0; i < listItems.length; i++) {
        listItems[i].className = '';
    }

    document.getElementById('bannername').value = label;
    clickedItem.className = 'highlighted';
}

Answer 3

There are already 2 flaws in your code:

1)

Field.value = label;

if(Field.value != label) { // this will never run, because you set the Field.value to the // label one line above }

2) when you use an id you can only use it once, else you should use a class in your 'li' elements.

Your question is very vague. You want the clicked 'li' element to have a red background and the rest not red?

You can do this by plain JS:

var lis= document.getElementsByTagName("li"); 
for (i = 0; i < lis.length; i++) {   
       var li = lis[i];    if(li.className == "adm-thumb") {
       li.backgroundColor = "transparent";   
    } 
 }  

this.backgroundColor = "red";

or jQuery:

$('adm-thumb').css("backgroundColor", "transparent");
$(this).css("backgroundColor", "red");