add value to existing javascript code on change event

Question

i have a javascript widget that will display a data chart.. and i have an dropdown box which gives the user the ability to change the theme. so when the user selects a theme it should change and show the user the new theme.

Widget code:

<script type="text/javascript">
new TradingView.widget({
  "width": 500,
  "height": 400,
  "interval": "1",
  "timezone": "Etc/UTC",
  "theme": "White",
  "style": "2",

}); 
</script>

HTML/JS code

<select>
    <option value="moonlight">Moon</option>
    <option value="darkness">Dark</option>
</select>

<script>
$(document).on('change','.theme',function(){
      alert(this.value);
    });
</script>

How do i get add the this.value to the widget JS code theme parameter?

Are you using any js plugin?

Deepak Biswal
– Deepak Biswal

2015-12-07 13:20:21 +00:00
Commented Dec 7, 2015 at 13:20 — Deepak Biswal
– Deepak Biswal, Commented Dec 7, 2015 at 13:20
@deepakb Looks like jQuery and is tagged with jQuery.

Jacob
– Jacob

2015-12-07 13:27:38 +00:00
Commented Dec 7, 2015 at 13:27 — Jacob
– Jacob, Commented Dec 7, 2015 at 13:27

Jai · Accepted Answer · 2015-12-07 13:27:52Z

3

I guess you should put the new widget code in a function and access the theme from the args:

<script type="text/javascript">
function themeChanger(theme){
  var themeWidget = new TradingView.widget({
    "width": 500,
    "height": 400,
    "interval": "1",
    "timezone": "Etc/UTC",
    "theme": theme,
    "style": "2",

  }); 
  return themeWidget;
}

$(document).on('change','.theme',function(){
   var widget = themeChanger(this.value);
   // do something with widget.
});

</script>

answered Dec 7, 2015 at 13:27

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

2 Comments

LiveEn Over a year ago

just got one small question..i added the same to different widget but when i choose an option from the dropdown, the widget loads like in a blank page and the dropdown is not visible. jsfiddle.net/livewirerules/3e9jaLku/5 can u please have a look at that fiddle and tell me what am i doing wrong there?

Jai Over a year ago

It seems it is replacing everything in the body with the widget.

Suhail Keyjani · Accepted Answer · 2015-12-07 13:45:44Z

0

you can use global variable

var chartParams={
  "width": 500,
  "height": 400,
  "interval": "1",
  "timezone": "Etc/UTC",
  "theme": "White",
  "style": "2",

}
new TradingView.widget(chartParams);
$(document).on('change','.theme',function(){
     chartParams["theme"]=this.value
     new TradingView.widget(chartParams);
    });

edited Dec 7, 2015 at 13:45

answered Dec 7, 2015 at 13:35

Suhail Keyjani

5883 silver badges11 bronze badges

Collectives™ on Stack Overflow

add value to existing javascript code on change event

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related