JS function never being called but others do

Question

I have the following select on my JSP file:

            <select id="order-select">
                <option value="Lowest price" onclick="sortLowestPrice()"><spring:message code="list.lowest"/></option>
                <option value="Highest price" onclick="sortHighestPrice()"><spring:message code="list.highest"/></option>
            </select>

Turns out I never get to call sortLowestPrice() or sortHighestPrice(). I know my JS works because other functions on it get called in the same JSP and they work fine.

Here's one of those functions:

function sortHighestPrice() {
    console.log("im here");
  var publications = document.querySelectorAll(".polaroid-property");
  var sort = [];
  var father = document.getElementById("publications");
  var i, j, k;
  var max = null;
  while (father.firstChild) {
        father.removeChild(father.firstChild);
  }
  for(i = 0; i < publications.length; i++){
    max = null;
    for(j = 0; j < publications.length; j++){
        if(publications[j].getAttribute("visited") != "true"){
            var price = parseInt(publications[j].getElementsByClassName("price-tag")[0].innerHTML.substring(1));
            if(price > max || max == null){
                max = price;
                k = j;
            }
        }
    }
    sort.push(k);
    publications[k].setAttribute("visited",true);
  }
  for(i = 0; i < sort.length; i++){
    publications[i].setAttribute("visited",false);
    father.appendChild(publications[sort[i]]);
  }
}

I never get 'im here' on the browser log.

Are there any JS errors reported in the browser log when the page loads or the button is clicket? — Continuity8, Oct 02 '18 at 21:26
I think this is your answer: "Neither the onSelect() nor onClick() events are supported by the — Continuity8, Oct 02 '18 at 21:28

score 2 · Accepted Answer · answered Oct 02 '18 at 21:39

Instead of trying to listen for click events on each <option>, you can listen for a change event on the parent <select> tag and retrieve the value of the selected option from the DOM event object inside of your function. See below:

function sortHighestPrice(e) {
    var optionValue = e.target.value;
}

<select onchange="sortHighestPrice(event)" id="order-select">
  <option value="Lowest price" onclick="sortLowestPrice()">
    <spring:message code="list.lowest"/>
    option1
  </option>
  <option value="Highest price"         onclick="sortHighestPrice()">
    <spring:message code="list.highest"/>
    option2
  </option>
</select>

Hope this helps!

score 1 · Answer 2 · answered Oct 02 '18 at 21:28

1

Sounds like your browser does not support onclick on the option element. Try using another element type such as a button (ie something that is guaranteed onclick support)

This is an issue I have run across with chrome.

answered Oct 02 '18 at 21:28

Jgillett7674

112
4

score -1 · Answer 3 · answered Oct 02 '18 at 21:33

-1

You can see on w3schools here that the option tag does not support onSelect() or onClick()

Further details on this Stackoverflow question outline an alternative approach, as my comment above mentions.

answered Oct 02 '18 at 21:33

Continuity8

2,403
4
19
34

1

Please don't post link-only answers to other Stack Exchange questions. Instead, include the essential portions of the answer here, and *tailor the answer to this specific question.* – jhpratt Oct 03 '18 at 00:29

JS function never being called but others do

3 Answers3