Thank you. Do you mean something like this?
function change(newValue) {
document.querySelector('#selectfieldId').value = newValue;
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
change(cla);
}
But this code doesn’t work still, I guess because “newValue” should be replaced by something other, I suppose according to the main js code (#15).
No. That JS that Paul gave you would replace the click events that are attached to the buttons/
Instead of the click event, you’re going to need another event to trigger the change() method. Document load or something like this. That’s where Paul’s code is going to need to go.
The intention with my code is just to add it to the end of the script in the codePen, and that worked well.
I tried this, unsuccressfully (too many “cla”, I suppose)
document.onload = function change(cla) {
document.querySelector('#selectfieldId').value = cla;
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
change(cla);
}
You’re mixing your metaphors. Follow the KISS method in this case.
Put this, just like this AND ONLY THIS into a script at the END of your html document.
function change(newValue) {
document.querySelector('#testme').value = newValue;
}
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
change(cla);
Or if you’re only going to load it once and never change it through some action on the page, the function is not needed. In that case, use this instead…just this, nothing else.
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
document.querySelector('#testme').value = newValue;
Thank you, Dave
yes this, in a standalone file, works!
The standalone file works even with the url: very good!
I tried this code:
<script type="text/javascript">
document.getElementById('selectfieldId').addEventListener('change', function() {
// remove the active class from the other elements
document.querySelector(".post.active").className = "post";
// IF the value of the select is the direct id of the div...
// if the name is not in the value, you'll have to adjust the this.value part
var selectedID = document.getElementById(this.value);
selectedID.className = "post active";
})
function change(newValue) {
document.querySelector('#selectfieldId').value = newValue;
}
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
change(cla);
</script>
This code can change the value of the select (div), but nothing other new appears.
So it is an half success, so to say. We are near to the success, I guess.
What does that mean? You’re going to show what it does, and then mockup something to show what it should be. I think you changed the goal from what you originally asked for…
Thank you. I mean that the original, main, js, does at the same time a change in the selected option and a change of the active div. This last one does only the first thing: changes the selected option but not the active div.
I asked above:
it would be possible to set a given div visible (by setting its class as ‘active’, with a javascript command) from an external (php/html) link?
With the change of a select value I should get visible (with class=active) the matching div. Otherwise it would be useless.
Ah. I get it now (and yes, you changed the goal a bit as this thread was limited to setting the value).
Events only occur automatically with action from the user. If you do something via javascript which would cause an event to fire if done manually, you need to manually force the event to fire.
You’ll need to tweak the change method a bit. This still needs to be put AFTER your other code.
function change(newValue) {
var dropdownField = document.querySelector('#testme')
dropdownField.value = newValue;
dropdownField.onchange();
}
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
change(cla);
Thank you!
I tried this new code, so that the end of my file now is:
<script type="text/javascript">
document.getElementById('selectfieldId').addEventListener('change', function() {
// remove the active class from the other elements
document.querySelector(".post.active").className = "post";
// IF the value of the select is the direct id of the div...
// if the name is not in the value, you'll have to adjust the this.value part
var selectedID = document.getElementById(this.value);
selectedID.className = "post active";
})
function change(newValue) {
var dropdownField = document.querySelector('#selectfieldId')
dropdownField.value = newValue;
dropdownField.onchange();
}
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
change(cla);
</script>
But, unfortunately, even with this one, I see changed only the selected option (value) not the active div 
Ugh…OK, try this. A slightly different approach
<script type="text/javascript">
document.getElementById('selectfieldId').addEventListener('change', function() {
// remove the active class from the other elements
document.querySelector(".post.active").className = "post";
// IF the value of the select is the direct id of the div...
// if the name is not in the value, you'll have to adjust the this.value part
var selectedID = document.getElementById(this.value);
selectedID.className = "post active";
})
function change(newValue) {
let dropdownField = document.querySelector('#selectfieldId')
dropdownField.value = newValue;
// should work in most modern browsers....
const event = new Event('change');
dropdownField.dispatchEvent(event);
}
const urlParams = new URLSearchParams(window.location.search);
const cla = urlParams.get('cla');
change(cla);
</script>
This works!!! Excellent! Wonderful! 
Thank you very, very much!!!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.