Call script from another script

Question

In HTML5 I have a dropdown menu . When choosing different options I hide or show different parts of my page. Here is that script:

document
    .getElementById('target')
    .addEventListener('change', function () {
        'use strict';
        var vis = document.querySelector('.vis'),   
            target = document.getElementById(this.value);
        if (vis !== null) {
            vis.className = 'inv';
        }
        if (target !== null ) {
            target.className = 'vis';
        }
});

However what I want to do now, in another script is to preload an option from the dropdown. I can do it easily with this script:

setSelectedIndex(document.getElementById('target'),'content_1');
function setSelectedIndex(s, valsearch)
    {
    // Loop through all the items in drop down list
    for (i = 0; i< s.options.length; i++)
    { 
    if (s.options[i].value == valsearch)
        {
        // Item is found. Set its property and exit
        s.options[i].selected = true;
        break;
        }
    }
    return;
}

This is where my problem comes up, my dropdow will get the value I want, but the part that I want to be shown when choosing that option won't come up.

You need to use this answer: stackoverflow.com/questions/2856513/… — epascarello
– epascarello, Commented Jul 16, 2015 at 13:40

msj121 · Accepted Answer · 2015-07-17 02:10:04Z

1

That is because change events need to happen from the browser.

When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a date from a date picker for , by selecting a file in the file picker for , etc.);

If your using Jquery you can:

$("#id").val("value").trigger('change');

or you can use javascript if your not worried about building the event object:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

edited Jul 17, 2015 at 2:10

answered Jul 16, 2015 at 13:39

msj121

2,8424 gold badges30 silver badges59 bronze badges

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

3 Comments

msj121 Over a year ago

I offered both jquery and javascript solutions, this will satisfy him and others....

epascarello Over a year ago

There is no onchange() method on a DOM element when the event is applied with addEventListener

msj121 Over a year ago

Well usually there is a onchange attribute and function that can be called for specific input elements developer.mozilla.org/en-US/docs/Web/Events/change, but I have changed the code to be more all encompassing.

Mike · Accepted Answer · 2015-07-16 14:23:19Z

0

I would recommend moving your anonymous onchange function into a named function that you can call once onload, and again onchange.

Here is the function I wrote:

function setContent(id) {
  //get the current visible content
   var vis = document.querySelector('.vis');
  //get the target element by id
   var target = document.getElementById(id);
  //make current vis element inv
   if (vis) vis.className = "inv";
  //make target element vis
   if (target) target.className = 'vis';
}

and a fiddle

edited: got rid of querySelectorAll to stick closer to OP original code and updated fiddle. clarified and commented code.

edited Jul 16, 2015 at 14:23

answered Jul 16, 2015 at 14:03

Mike

1,3361 gold badge13 silver badges17 bronze badges

2 Comments

1x2x3x4x Over a year ago

Thanks a lot, I understood your solution the best since it was commented and exemplified.

Mike Over a year ago

Glad I could help -- feel free to select it as the answer if it worked for you ;)

epascarello · Accepted Answer · 2015-07-16 16:37:11Z

The problem you have is changing a vale or the selected value of an input with JavaScript does not trigger any change event. So you would need to manually trigger the event.

function setSelectedIndex(s, valsearch)
    {
    // Loop through all the items in drop down list
    for (i = 0; i< s.options.length; i++)
    { 
    if (s.options[i].value == valsearch)
        {
        // Item is found. Set its property and exit
        s.options[i].selected = true;
        break;
        }
    }
    //Setting the selected value with JavaScript does not trigger the change event so you need to manually trigger the change event
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        s.dispatchEvent(evt);
    } else {
        s.fireEvent("onchange");
    }
    return;
}

Collectives™ on Stack Overflow

Call script from another script

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related