Using a callback function instead of onchange

Question

I have a form with some basic changes being made by jQuery, this all works fine... Currently, I am having to use onchange="state()" in order to call the script.

I am really new to Javascript and JQuery and was wondering if this really is the best solution, I was thinking of using a callback function probably using on() instead but can't seem to get this working, is this the best solution and how would I achieve a callback function (even if its not the best solution as I am simply interested)

Thanks

let cWebsite = ["Communicate a message", "Build trust in our brand", "Sell our product", "Get our content online", "Realign our brand", "Engage a new audience"];
let iWebsite = ["make our site more discoverable", "increase engagement", "make it more user friendly", "improve accessiblity", "add more sections", "rebuild the whole thing!"];
let cSeo = ["build on my seo", "make my website faster", "make my website more usable"];
let iSeo = ["improve seo", "reporting my seo", "engage an audience", "All seo services", "compliment other touchpoints"];
let cGraphics = ["Create more graphics", "improve a specific section", "target a new audience", "make it more noticable", "make it stand out"];
let iGraphics = ["test a graphic", "solve a business problem", "track stuff!", "engage an audience", "promote our brand"];

let prices = {
    cWebsite: ["Please Select", "5k - 10k", "10k - 20k", "20k - 30k", "10k - 40k", "60k - 80k", "80k - 100k", "100K+"],
    iWebsite: ["Please Select", "5k - 10k", "10k - 20k", "20k - 30k", "10k - 40k", "60k - 80k", "80k - 100k", "100K+"],
    cSeo: ["Please Select", "£300/mo", "£550/mo", "£1100/mo"],
    iSeo: ["Please Select", "£300/mo", "£550/mo", "£1100/mo"],
    cGraphics: ["Please Select", "£100 - £300", "£300 - £600", "£900 - £1k", "1k - 5k", "5k - 15k", "15k+"],
    iGraphics: ["Please Select", "£100 - £300", "£300 - £600", "£900 - £1k", "1k - 5k", "5k - 15k", "15k+"]
    };

function state() {
    let sta = document.getElementById("state");
    let ser = document.getElementById("service");
    let site = document.getElementById("lives");
    let state = sta.options[sta.selectedIndex].value;
    let service = ser.options[ser.selectedIndex].value;

    if (state === "create") {
        if (service === "website") {
            doJoin(cWebsite);
            priceList(prices.cWebsite);
            site.style.display = "none";
        } else if (service === "seo") {
            doJoin(cSeo);
            priceList(prices.cSeo);
            site.style.display = "block";
        } else if (service === "graphics") {
            doJoin(cGraphics);
            priceList(prices.cGraphics);
            site.style.display = "none";
        }
    } else if (state === "improve") {
        if (service === "website") {
            doJoin(iWebsite);
            priceList(prices.iWebsite);
            site.style.display = "block";
        } else if (service === "seo") {
            doJoin(iSeo);
            priceList(prices.iSeo);
            site.style.display = "block";
        } else if (service === "graphics") {
            doJoin(iGraphics);
            priceList(prices.iGraphics);
            site.style.display = "none";
        }
    }
}



function doJoin(x) {
 $("#choices").empty();
    x.forEach(function (list) {
    let checkbox="<input type='checkbox'><label>"+list+"</label><br>"
    $("#choices").append($(checkbox));
    });
}


function priceList(x) {
 $("#pricelist").empty();
    x.forEach(function (list) {
    let option="<option>"+list+"</option>"
    $("#pricelist").append($(option));
    });
      }

I can't recommend [Elm](https://elm-lang.org/) or [React](https://reactjs.org/) highly enough. Spend one day exploring a new way of thinking about the problem. In the end, you may not choose Elm or React for your project, but you will always have the lesson to learn and grow from. — Mulan, Feb 04 '19 at 17:18
Is the question whether or not to use global event handler attributes in HTML or `.addEventListener()`? — guest271314, Feb 04 '19 at 17:19
@saltedm8 See [When did using global event handler attributes within html become “considered bad practice”?](https://stackoverflow.com/q/36388227/). It depends. What is the second portion of the question? Note, it is not necessary to wrap the HTML strings to a `jQuery()` call at `$("#choices").append($(checkbox))` or `$("#pricelist").append($(option))` — guest271314, Feb 04 '19 at 17:23
I don't see where you're using `on` in this code. Please include all relevant code in a [mcve], in the question itself. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do so. — Heretic Monkey, Feb 04 '19 at 17:24
I am not using on() in this code, the question was whether I could use it somehow, like this maybe $('state').on('change', function() // state() // }) - or but that does not seem to work — saltedm8, Feb 04 '19 at 17:28

score 0 · Answer 1 · answered Feb 04 '19 at 17:59

0

   $( "#foo" ).on( "click", function() {
  console.log( 22 );
});  
 <div id="foo">asas</div>

for more refer here :http://api.jquery.com/on/

answered Feb 04 '19 at 17:59

kunal verma

456
5
13

I know that is how it is used, it just does not seem to be working when applied to my code, that is the purpose of the question, but thanks for replying – saltedm8 Feb 04 '19 at 19:39

Using a callback function instead of onchange

1 Answers1