1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Write the value of a variable

Discussion in 'JavaScript' started by samuvk, Sep 25, 2015.

0
  1. #1
    I have values stored in a variable in Javascript in this way:

    var VariableCity = "Birmingham"
    var VariableCapital = "Montgomery"

    Now I would like to write the value stored in the variable in a determinated place in the HTML document as below.

    How can I accomplish that?

    I tried: document.write(VariableCity) but:
    1. I got this error: "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
    2. That way I'm not indicating where to write it

    THANK YOU SO MUCH!!!!!

    <body>
    <div style="width:100%;border:0px solid #ededed;">
    <div style="float:left;width:5%;">
    <select id="SystemSelector" onChange="sendAndDraw(this.value)">
    <option value="Al">Alabama</option>
    <option value="Tx">Texas</option>
    </select>
    </div>
    <div style="float:left;width:95%;">
    <button onclick="loadEditor(SystemSelector.value)">Change type of Graph</button>
    City: VariableCity
    <div id="Piechart_div" style="width: 100%;"></div>
    </div>
    </div>

    <div style="width:100%;border:0px solid #ededed;">
    <div id="chartGauge_div" align='center' style="width:100%"></div>
    Capital: VariableCapital
    </div>
    </body>
     
    samuvk, Sep 25, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    When working async you have to think like you were working post-load. In fact, depending on where/when you are loading your script you might not even be able to put in the markup as that part of the DOM might not even be loaded yet. That's why I don't like using asynchronous loads, and instead load normally but do so right before </body> which has a similar effect, but means that the DOM is built and ready to be manipulated.

    Where in your document are you even loading the script? That's the big question here...

    Of course there are other typical scripttard flubs in here in terms of outdated methodologies -- like having onclick in the markup, no scripting off degradation, abusing button and select outside of a form (They're called form elements for a REASON people!), static style in the markup, attributes like ALIGN that have no business in any HTML written after 1997, etc, etc... Laundry list of how not to write HTML... though very much what I've come to expect when I see scripttardery involved.

    In any case, what you need to do is manipulate the DOM. That means where you are changing the value should probably have it's own tag like SPAN and an ID.

    Capital: <span id="varCapital"></span>
    Code (markup):
    Some people will tell you to use innerHTML or innerText to write to it, the problem is innerHTML forces a reflow of the entire document which can trigger undesired side effects and take extra time/cpu. InnerText is better, but inconsistently implemented across browsers. STILL:

    document.getElementById('varCapital').innerHTML = VariableCapital;
    Code (markup):
    Would work. It's quick and easy, but it's not the PROPER way of doing it which is why the ECMA recommended technique would be:

    // get the element
var span_varCapital = document.getElementById('varCapital');
// flush any and all child nodes
while (span_varCapital.firstChild) span_varCapital.removeChild(span_varCapital.firstChild); 
// add our text as a textnode
span_varCapital.appendChild(document.createTextNode(variableCapital);
    Code (markup):
    I usually have these helper functions in my code:

    function nodeFlush(e) {
  while (e.firstChild) e.removeChild(e.firstChild);
}

function nodeAdd(e, newNode) {
	e.appendChild(
		typeof newNode == 'object' ?
		newNode :
		document.createTextNode(newNode)
	);
}

function nodeReplace(e, newNode) {
	nodeFlush(e);
	nodeAdd(e, newNode);
}
    Code (markup):
    Which would reduce the code to change the contents of that span to:

    nodeReplace(document.getElementById('varCapital'), variableCapital);
    Code (markup):
    There's a reason we were told from 2000 to 2010 to STOP using document.write, STOP using innerHTML, STOP using onevent attributes in the markup; mysteriously them telling us that magically disappeared around the same time HTML 5 came along and started pissing on things. It's almost like the standards associations involved in making the alleged specifications shrugged their shoulders, and said "OH well, nobody's paying attention so go ahead and just sleaze out this crap any-old-way".

    Which is why it seems the bleeding edge of 1997 development is now the accepted norm.
     
    deathshadow, Oct 5, 2015 IP