Why default properties in external JS file were not overwritten with user defined properties in object?
Question
I have an HTML and JS file. Should the user want to overwrite the default settings that are declared in the external JS file all they have to do is include the following as an inline script:
<script>
userControls = {
transition : 'fade',
nextText : 'Next'
}
</script>
The problem I am facing is that my external script is not picking up the user settings and is setting everything as default.
var defControls = { transition : 'default', nextText : 'Next »' }; var userControls = {}; // CHECKS FOR userControls if (Object.getOwnPropertyNames(userControls).length > 0) { var controls = Object.assign({}, defControls, userControls); } else { controls = defControls; } console.log(userControls); console.log(controls); console.log(defControls);
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="styles.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS --> <script type="text/javascript" src="script.js"></script> </head> <body> <!-- SENDS THE NEW PARAMETERS TO script.js --> <script> userControls = { transition : 'fade', nextText : 'Next' } </script> </body> </html>
2 answers
solution1
0 2018-09-07 22:22:41
It's because that you inserted the user choice after your js file loads. It goes through the following control first
if (Object.getOwnPropertyNames(userControls).length > 0)
so this will always evaluate to false . That's why you keep getting default values. You should either insert the user choice script first or some async functionality in the js file.
solution2
0 ACCPTED 2018-09-08 21:09:07
You have four and half mistakes in your code:
- You have to write inline script with code:
var userControls = {transition: 'fade', nextText: 'Next'};before external JS file. And do not forget;on the end (it is the half mistake). - The line
var userControls = {};in external JS file has overwrited the settings inuserControlsin inline script . I think you wanted to write insteadvar controls = {};. - The
var controls = {};you have to write beforeif...elsestatement. - You write
console.log(userControls);instead ofconsole.log(JSON.stringify(userControls));Your code writes only[object Object]in developer console from IE. But in Chrome it is okey.
Solution with corrected code
<!DOCTYPE html> <html><head> <!-- <link type="text/css" rel="stylesheet" href="styles.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- SENDS THE NEW PARAMETERS TO script.js --> <script type="text/javascript"> var userControls = { transition : 'fade', nextText : 'Next' }; </script> <!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS src="script.js" --> <script type="text/javascript"> var defControls = { transition : 'default', nextText : 'Next »' }; //THIS WAS THE MISTAKE: var userControls = {}; this line has overwrited the settings var controls = {}; // CHECKS FOR userControls if(Object.getOwnPropertyNames(userControls).length > 0) { controls = Object.assign({}, defControls, userControls); } else { controls = defControls; } console.log('userControls =\\n' + JSON.stringify(userControls, null, '\\t')); console.log('controls =\\n' + JSON.stringify(controls, null, '\\t')); console.log('defControls =\\n' + JSON.stringify(defControls, null, '\\t')); </script> </head> <body></body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.