Javascript - Change symbol on embedded tradingview script.text

Question

I am trying to change the ticker widget of an embedded tradingview iframe onclick according to the selected symbol. The JS part inside the onclick function looks like this:

document.getElementById("trading-view").innerHTML = ""; 
var script = document.createElement("script"); 
    script.setAttribute('src', 'https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js'); 
    script.text = '{' + 
      '"width": "100%",' +
      '"height": "100%",' +
      '"symbol": "AAPL",' +       
      '"locale": "en",' +
      '"interval": "1D"' +
    '}'; 
    document.getElementById("trading-view").appendChild(script);

It basically resets the iframe but uses always the same symbol. I tried to create a variable called symbol and wanted to use it instead of the "AAPL" string but it didn't work. It would be great if you could answer that! (I searched for similar problems of embedding tradingview on stackoverflow but most of the answer where based on Node and didn't help me.)

Answer 1

You have to append the variable to the string (which is surrounded by single quotes) in such a way that the double quotes remain. Try:

'"symbol": "' + symbolX + '",' +