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: http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually — epascarello, Jul 16 '15 at 13:40

msj121 · Answer 1 · 2015-07-17T02:10:04.387

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 '15 at 02:10

answered Jul 16 '15 at 13:39

msj121

2,812
3
28
55

I offered both jquery and javascript solutions, this will satisfy him and others.... – msj121 Jul 16 '15 at 13:59
There is no onchange() method on a DOM element when the event is applied with addEventListener – epascarello Jul 16 '15 at 16:28
Well usually there is a onchange attribute and function that can be called for specific input elements https://developer.mozilla.org/en-US/docs/Web/Events/change, but I have changed the code to be more all encompassing. – msj121 Jul 17 '15 at 02:12

Mike · Accepted Answer · 2015-07-16T14:23:19.767

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 '15 at 14:23

answered Jul 16 '15 at 14:03

Mike

1,266
1
11
17

Thanks a lot, I understood your solution the best since it was commented and exemplified. – 1x2x3x4x Jul 16 '15 at 14:52
Glad I could help -- feel free to select it as the answer if it worked for you ;) – Mike Jul 16 '15 at 14:53

score 0 · Answer 3 · answered Jul 16 '15 at 16:37

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;
}

Call script from another script

3 Answers3