Before you label it as duplicate, I already have looked at here, as well, here too, but I can not seem to find a working solution. I understand that I can not pass a script to innerHTML because of the script tag. But is there possibly a way to push this particular API into a div without putting it onto the HTML page. I have a button that takes in an input and run a couple $.get to get stock information, so I want to include this as part of the result, however, innerHTML is not allowed, and I have attempted many of the solutions in the links above, to no avail.
I can place the script below within the div on the HTML page, but I prefer not to do that, and plus I need to get the user input, so placing it within my .js would be much easier to perform all functions together. I have the widget's js included.
<script type="text/javascript">
new TradingView.widget({
"width": 480,
"height": 400,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true
});
</script>
So far I have
var script = document.createElement('script');
script[(script.innerText===undefined?"textContent":"innerText")] = "new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:"+ticker+ "','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});";
document.getElementById("stockChart").appendChild(script);
And this work but not how I want it to, however, this just execute that script and this chart is the only thing displaying on the page, is there a way I can force this to be in the <div>
? With the above solution, the script is executed, but not placing the widget within the div (it seems like, I could be wrong. I am not proficient in this).
In this image, when I run the script with JS file with the other operations, it just display the graph by itself on the page.
This is when the code is within the div and before running any JS functions, I guess it is in the div, however, I need to put an input above in the box so all of the information can be display on one page like below
I want the graph to be place in the red dot, where the
<div>
is
HTML
<div id="content">
<img src="icon/logo.png">
<h1>Search Shares</h1>
<div id="stockTickGet">
Ticker: <input type="text" id="tickBox" list="options"/>
<button onclick="Ticker()" id="tickerSubmit" class="btn btn-primary">Submit</button>
<datalist id="options"></datalist>
</div>
<div id='showStockTick' class='stockTicker'></div>
<!-- <div id='stockChart'></div> -->
<div id='stockChart'>
</div>
<div id='showStockSearch' class='stockTicker'></div>
<div id='newsresult' class='stockTicker'></div>
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Buy Stocks</button>
</div>
In a sense, this is what I want to do, but not allowed/working
document.getElementById("stockChart").innerHTML = "<script> new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:GOOG','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});<"+"/script>";