CODEWITHSUNDEEP
javascriptvariables
user2330961
user2330961

Reputation: 1

Javascript Help for Innerhtml

I've been trying this Javascript code below that will allow me to insert different variables into html depending on what is clicked. Unfortunately it will not show the value of the variable but only shows the variable name as defined below.

<head>
<script type="text/javascript">
var data=new String ()
data="This is what I want to Show"
function myFunction(text) 
{
elem = document.getElementById('replace');
elem.innerHTML = text
}

</script>
</head>

<body>
<button onclick="myFunction('data')">  Press    </button>

<div id="replace">
Test
</div>

</body>

Upvotes: 0

Views: 297

Answers (5)

Nales Make
Nales Make

Reputation: 26

You are using the variable text to assign value to dive with id replace. Use this.

elem.innerHTML = data instead elem.innerHTML = text.

Or pass args to function without single qoute.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

You're passing a string, not a variable, use:

onclick="myFunction(data)"

A string must be quoted, a variable (a reference, in this case, to a string) must not (otherwise it'll be assessed as a literal string).

Incidentally, JavaScript doesn't require you to explicitly create a string before assigning a value to it, you could use just:

var data = 'This is what I want to show.';

And while using innerHTML works, if all you're doing is updating text content (and there are no nested nodes to be considered) you could simply use:

function myFunction(text) {
    // the var declaration prevents the variable becoming global
    var elem = document.getElementById('replace');
    elem.appendChild(document.createTextNode(text));
}

And to make it more generally-useful, avoid hard-coding the id of the element to change within the function, instead pass it to the function:

function myFunction(text, elem) {
    // testing if the element is a node, if not assume it's a string of the id:
    var elem = elem.nodeType === 1 ? elem : document.getElementById('replace');
    elem.appendChild(document.createTextNode(text));
}

And coupling the above with:

onclick="myFunction(data, 'replace')"

Or:

onclick="myFunction(data, document.getElementById('replace'))"

I'd also, strongly, advise not using in-line/obtrusive JavaScript, simply to make it easier to update the functions to be called, the arguments and the functions themselves, in one place (rather than having to navigate through the document and finding every instance in which the function is called):

// define the function here

var buttons = document.getElementsByTagName('button'),
    replace = document.getElementById('replace'),
    data = 'Text I want to show.';

for (var i = 0, len = buttons.length; i < len; i++){
    buttons[i].onclick = function(){
        myFunction(data, replace);
    };
}

Upvotes: 4

Walter Lee
Walter Lee

Reputation: 63

This is your code..

<button onclick="myFunction('data')">  Press    </button>

because here is a string, not the reference object 'data'.. so i guess this is what you want..
1.

<button onclick="myFunction(data)">  Press    </button>


2. <button onclick="myFunction('This is what I want to Show')"> Press </button>

Upvotes: 0

Antony
Antony

Reputation: 15106

If "this is what you want to show", better put it in the argument so that you can reuse the function if there are more buttons:

<button onclick="myFunction('This is what I want to Show')">Press</button>

See DEMO.

Upvotes: 0

Joseph
Joseph

Reputation: 119837

data is attached to the global window object. To access it:

elem.innerHTML = window[text];

Additionally, no need for new String() as strings can be defined in the following way:

var data = "This is what I want to Show";

Upvotes: 0

Related Questions