Calling Javascript functions with HTML dropdowns

Question

I've been trying to call functions from a drop-down menu, but for some reason only shift(CPL) seems be called. I have verified that the functions themselves are working, and have redacted those for easier reading. I'm very new to Javascript and may have made a fairly basic error, apologies for that and thanks in advance!

HTML:

<select onchange="shift(this.value);">
  <option value="CPM">CPM</option>
  <option value="CPC">CPC</option>
  <option value="CPL">CPL/A</option>
</select>

Javascript:

function shift(CPM) {

}

function shift(CPC) {

}

function shift(CPL) {

}


</script>

Three function declarations with same name ? , or call single shift function with value of select as parameter ? — guest271314
– guest271314, Commented Sep 28, 2015 at 13:30
Ah, apologies. I meant to have a single function, and call it with various parameters as presented in the drop-down menu, but from comments it seems I have done this completely wrong... Would someone be so kind as to provide an example of how I'd structure a function that accepts the various parameters of the drop-down menu? — RFM_Euan
– RFM_Euan, Commented Sep 28, 2015 at 13:36

gbalduzzi · Accepted Answer · 2015-09-28 13:47:11Z

1

I think you didn't really understand how functions work in programming languages, i recommend you to study a little more and follow guides before trying to create something new.

Basically, you don't have to create 3 different shift function: one is more then enough: only the parameter will change. try this code:

function shift (genericParameter) {
  if (genericParameter == 'CPM') {
     //CPM
  } else if (genericParameter == 'CPC') {
     //CPC
  } else if (genericParameter == 'CPL') {
    //CPL
  }
}

edited Sep 28, 2015 at 13:47

answered Sep 28, 2015 at 13:34

gbalduzzi

10.3k3 gold badges36 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RFM_Euan Over a year ago

Ah, thank you! My workplace is very much supportive of 'sledgehammer learning' when it comes to programming, but I will study the foundation concepts more vigorously and make sure to consolidate the fundamentals better. Thanks again.

gbalduzzi Over a year ago

we are here to help you :) of course practice is great for learning, just follow some live example at first :D

gon250 · Accepted Answer · 2015-09-28 13:45:20Z

1

For how to do it in jquery:

DEMO

js code:

$(document).ready(function(){

  $('select').on('change', function() {
   shift(this.value);
  });

});

function shift(yourValue) {
    alert(yourValue) //Implement what you need here. 
}

//or maybe you prefer this:

function shift(yourValue) {
    switch(yourValue) {
        case 'CPM':
            //code block
            break;
        case 'CPC':
            //code block
            break;
        case 'CPL':
            //code block
            break;
        default:
            default code block
    }
}

hope it's helps.

edited Sep 28, 2015 at 13:45

answered Sep 28, 2015 at 13:40

gon250

3,5737 gold badges48 silver badges76 bronze badges

3 Comments

RFM_Euan Over a year ago

Thanks very much! I'm not massively familiar with Jquery, but I'll take time to try this out. Thanks again for your contribution :)

gon250 Over a year ago

you also can use the function shift with the switch with your code you don't need jquery for that if you want to avoid use if else @RFM_Euan

RFM_Euan Over a year ago

Thanks, I'll keep that in mind and have a play around with the code you provided.

guest271314 · Accepted Answer · 2015-09-28 13:51:30Z

1

Try creating an object having properties of select values , at selection do stuff corresponding to property name of object

var selected = {
  "CPM":"option 1",
  "CPC": function(v) {
           return v.toLowerCase()
  },
  "CPL": "option 3"
}

function shift(val) {
  var res = typeof selected[val] === "function" 
            ? selected[val](val) 
            : selected[val];
  alert(res)
}

CPM
<select onchange="shift(this.value);">
  <option value="CPM">CPM</option>
  <option value="CPC">CPC</option>
  <option value="CPL">CPL/A</option>
</select>

answered Sep 28, 2015 at 13:51

guest271314

1

1 Comment

RFM_Euan Over a year ago

Thanks for the contribution, it looks fairly abstract to my untrained eye... but I'll dive in and have a go until I understand. Thanks again :)

Ranjeet · Accepted Answer · 2015-09-28 14:00:37Z

1

i think your missing just syntax , this can help you..

enter code here

<select id="selectDrop" onchange="copy();">
    <option value="">Default:</option>
    <option value="one" >one</option>
    <option value="two" >two</option>
    <option value="three" >three</option>
  </select>

JavaScript :-

  function copy(){
     alert(document.getElementById("selectDrop").value);
     }

answered Sep 28, 2015 at 14:00

Ranjeet

8,1621 gold badge16 silver badges18 bronze badges

1 Comment

RFM_Euan Over a year ago

Thank you, this looks like in future it would be a good test to check that a drop-down menu is working.

Collectives™ on Stack Overflow

Calling Javascript functions with HTML dropdowns

4 Answers 4

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related