10 Replies - 2913 Views - Last Post: 22 August 2011 - 10:43 AM

#1 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

DOM inside variable with innerHTML?

Posted 21 August 2011 - 11:27 AM

This is executing document.getElementById('thing').innerHTML = 'this is some text'; before the variable is even called.
var create_element = document.getElementById('thing').innerHTML = 'this is some text';



Is there a way to get the document.getElementById('thing').innerHTML = 'this is some text' to execute when the variable is used after the assignment?
Like:
var create_element = document.getElementById('thing').innerHTML = 'this is some text';
create_element; // executes document.getElementById('thing').innerHTML = 'this is some text'



I know that document.getElementById('thing').innerHTML = 'this is some text' can be used in a function body instead, but is there a way to use it in the variable?

I'd like to get the whole thing inside a variable, but I'm not finding any info on how to do this on the internet.

P.S. I know some people don't like innerHTML, but for the purpose of this exercise it, well it serves a purpose. :)

Is This A Good Question/Topic? 0
  • +

Replies To: DOM inside variable with innerHTML?

#2 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 11:32 AM

is there a reason not to just use a function?

What you're doing right now is basically a double assignment. You're assigning a value directly to the dom element and then assigning that same value to the variable. It sounds like you're wanting a variable that when called executes something which as far as I know is not something that is possible. A variable just stores data, it doesn't execute anything, for that you need a function. Now you can do something like

var create_element = function(){
    document.getElementById('thing').innerHTML = 'this is some text';
} 


but it would still be called just like a function. create_element();

This post has been edited by Nakor: 21 August 2011 - 11:38 AM

Was This Post Helpful? 1
  • +
  • -

#3 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 12:28 PM

View PostNakor, on 21 August 2011 - 01:32 PM, said:

is there a reason not to just use a function?

What you're doing right now is basically a double assignment. You're assigning a value directly to the dom element and then assigning that same value to the variable. It sounds like you're wanting a variable that when called executes something which as far as I know is not something that is possible. A variable just stores data, it doesn't execute anything, for that you need a function. Now you can do something like

var create_element = function(){
    document.getElementById('thing').innerHTML = 'this is some text';
} 


but it would still be called just like a function. create_element();

I would like to eventually put the document.getElementById('thing').innerHTML = 'this is some text' into an argument like:
a_function(document.getElementById('thing').innerHTML = 'this is some text');


or from a function to the a_function:
changer(what){
    document.getElementById('thing').innerHTML = what;
}
a_function(changer("what to change to"));



The a_function would have an event listener or a timer for execution of changer(), but within an argument the document.getElementById('thing').innerHTML = what; still executes before the code inside a_function() can get to it. I'd prefer the innerHTML to be used after an event in the a_function while it is being passed into the argument of a_function().

This post has been edited by hiddenghost: 21 August 2011 - 12:29 PM

Was This Post Helpful? 0
  • +
  • -

#4 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 12:35 PM

Create a function with
document.getElementById('thing').innerHTML = what;
then pass it as a callback to your other function. That's the most I can make heads or tails of what you're asking.
Was This Post Helpful? 0
  • +
  • -

#5 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 01:14 PM

View Postcodeprada, on 21 August 2011 - 02:35 PM, said:

Create a function with
document.getElementById('thing').innerHTML = what;
then pass it as a callback to your other function. That's the most I can make heads or tails of what you're asking.

changer = function(what){
    document.getElementById('thing').innerHTML = what;
}
a_function = function(how){
    to = document.getElementById('thing');
    to.addEventListener('click',how,false);
}
a_function(changer("what to change to")); // changer executes before code in a_function


The problem is changer() executes while in the a_function() call and doesn't get used by the event listener.

The only fix I've found is to write it like:
changer = function(what){
    document.getElementById('thing').innerHTML = what;
}
a_function = function(how){
    to = document.getElementById('thing');
    to.addEventListener('click',how,false);
}
a_function(function(){changer("what to change to");}); // changer gets used by the event listener


Only I would rather get the changer() function to just work by being passed without the anonymous function.
Was This Post Helpful? 0
  • +
  • -

#6 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 02:10 PM

a_function(changer); would have worked just fine. addEventListener is expecting a callback function so there's no need to pass a function calling your function when you could have simply passed your function in the first place.
Was This Post Helpful? 0
  • +
  • -

#7 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 02:58 PM

View Postcodeprada, on 21 August 2011 - 04:10 PM, said:

a_function(changer); would have worked just fine. addEventListener is expecting a callback function so there's no need to pass a function calling your function when you could have simply passed your function in the first place.

<html>
<head>
<title>Test</title>

</head>
<body>
<p id="thing">replace this text</p>
<script src="gdS.js">
</script>
<script type = "text/javascript">
changer = function(what){
    document.getElementById('thing').innerHTML = what;
}
a_function = function(how){
    to = document.getElementById('thing');
    to.addEventListener('click',how,false);
}
a_function(changer("what to change to")); // changer executes before code in a_function

</script>
</body>
</html>


Every time I run this in the browser "what to change to" appears in the browser right when it loads and not after the click.

This post has been edited by hiddenghost: 21 August 2011 - 02:58 PM

Was This Post Helpful? 0
  • +
  • -

#8 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 09:43 PM

Yes that's how a function works. If you look at your code closely you'll see that you're passing the returned value of changer("what to change to") to a_function() instead of the actually function itself.
Was This Post Helpful? 1
  • +
  • -

#9 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 10:28 PM

View Postcodeprada, on 21 August 2011 - 11:43 PM, said:

Yes that's how a function works. If you look at your code closely you'll see that you're passing the returned value of changer("what to change to") to a_function() instead of the actually function itself.


How is the line a_function(changer("thing", "what to change to")); making the document.getElementById(a).innerHTML = what; execute before to.addEventListener('click',how,false); gets a chance to use it?

I'm trying to pass the DOM to the listener but it's not making it some how. Like the listener isn't even working. The DOM part with the innerHTML is working, but it's not waiting for a click.
Was This Post Helpful? 0
  • +
  • -

#10 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: DOM inside variable with innerHTML?

Posted 21 August 2011 - 10:43 PM

View Postcodeprada, on 21 August 2011 - 11:43 PM, said:

Yes that's how a function works. If you look at your code closely you'll see that you're passing the returned value of changer("what to change to") to a_function() instead of the actually function itself.

Can you clarify what you mean?
Is changer() getting passed or the "what to change to" value to a_function().

I'm not sure what you mean by how a function works. I've used similar arrangements of code that aren't DOM and they worked fine passed into a function. For some reason I'm just having trouble getting this right. Maybe I'm a little short on understanding how functions work. I'm not sure.

Is it that the value document.getElementById(a).innerHTML = what; is just appearing from changer() into a_function as it is before it gets inserted into to.addEventListener('click',how,false);?

If so how can I get document.getElementById(a).innerHTML = what; to work only when the event listener needs it?
Was This Post Helpful? 0
  • +
  • -

#11 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,021
  • Joined: 08-June 10

Re: DOM inside variable with innerHTML?

Posted 22 August 2011 - 10:43 AM

the point is, when calling a_function(changer("what to change to")) you instantly execute changer("what to change to"), even before a_function() has a chance to do anything.

besides that, you don’t assign an event handler (how resolves to undefined).

This post has been edited by Dormilich: 22 August 2011 - 10:45 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1