/    Sign up×
Community /Pin to ProfileBookmark

Return statement of function display problem

Copy linkTweet thisAlerts:
Oct 04.2008

Hi,

I’ve created a piece of javascript which calculates the sunrise/sunset time for any day inputted into a form. If I include the document.write() statement inside the function which performs the calculation, when I press submit on the form, the answer is displayed but the input form itself disappears.

This example code shows what I mean:

[code=html]

<html>
<head>
<script type=”text/javascript”>

function display(){
var text = document.form1.text1.value;
document.write(text);
}

</script>
</head>

<body>
<form name = “form1”>
<input type = “text” name = “text1”>
<input type = “button” value = “click” onClick = “display()”>
</form>
</body>
</html>

[/code]

If I put the document.write() statement outside of the form then the result will only be displayed when the page is refreshed. What I’ve been trying to do is to keep the onClick event handler sending the information through the function instead of simply refreshing the page and then displaying it alongside the input form. I have however been unable to achieve this.

Any help would be appreciated.

Allan

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@PadonakOct 04.2008 — you are trying to refer an object ([color=#dc143c]document.form1.text1[/color]) before it is created by browser thats why it causes **** as it seems to me. i'd try onload() or setTimeout()
Copy linkTweet thisAlerts:
@aj_nscOct 04.2008 — Actually, the reason why it refreshes the page is the document.write. You can't use document.write on a page that is finished loading without a refresh. You need to create a new text node and append it to the body, like this:

<i>
</i> &lt;script type="text/javascript"&gt;

<i> </i> function display(){
<i> </i> var text = document.form1.text1.value;
<i> </i> document.getElementsByTagName("body")[0].appendChild(document.createTextNode(text));
<i> </i> }

<i> </i>&lt;/script&gt;



For more info on working with the DOM using JS, check out this link
Copy linkTweet thisAlerts:
@allanibanezauthorOct 04.2008 — Hi, thanks for getting back to me so quickly! The code below is is now working with a text node appended to the body, however there is still a small problem. Everytime I put a new number into the text box and submit it to the function, a new text node is produced. This produces a string of all the inputs entered. Is there a way of replacing the value of the text node?

[code=html]

<html>
<head>
<script type="text/javascript">

function display(){
var text = document.form1.text1.value;
var node = document.createTextNode(text);
document.body.appendChild(node);
}

</script>
</head>

<body>
<form name = "form1">
<input type = "text" name = "text1">
<input type = "button" value = "click" onClick = "display()">
</form>
</body>
</html>

[/code]
Copy linkTweet thisAlerts:
@aj_nscOct 04.2008 — <i>
</i> &lt;script type="text/javascript"&gt;

<i> </i> function display(){

<i> </i> var text = document.form1.text1.value;
<i> </i> var node = document.createElement("span");
<i> </i> node.id = "yourId";

<i> </i> if(!(document.getElementById("yourId"))) {
<i> </i> document.body.appendChild(node);
<i> </i> }

<i> </i> document.getElementById("yourId").innerHTML = text;
<i> </i> }

<i> </i>&lt;/script&gt;



You can change "yourId" to whatever you want in the above code. Just make sure you change all of them to the same thing.
Copy linkTweet thisAlerts:
@allanibanezauthorOct 04.2008 — <i>
</i> &lt;script type="text/javascript"&gt;

<i> </i> function display(){

<i> </i> var text = document.form1.text1.value;
<i> </i> var node = document.createElement("span");
<i> </i> node.id = "yourId";

<i> </i> if(!(document.getElementById("yourId"))) {
<i> </i> document.body.appendChild(node);
<i> </i> }

<i> </i> document.getElementById("yourId").innerHTML = text;
<i> </i> }

<i> </i>&lt;/script&gt;



You can change "yourId" to whatever you want in the above code. Just make sure you change all of them to the same thing.[/QUOTE]

Thanks for your time on this ?

I have to admit that I'm now struggling to use this in the sunrise calculator i've created as I need to output the value of a variable which changes depending on the input, instead of the value of an "id", but i shall just have to keep trying.
Copy linkTweet thisAlerts:
@allanibanezauthorOct 04.2008 — I have to admit that I'm now struggling to use this in the sunrise calculator i've created. In that document, I can now atleast display the output time of when the sun will indeed rise, but I am having the problem of it repeating once again.

The value of the text variable is no longer coming from the input form, but is instead the end result of many calculations. I think I therefore need to channge the value of the node.id and document.getElementById to variables, but im not entirely sure how.

[code=html]

function display(){
//var text is the end result of many functions
var text = 7:04;
var node = document.createElement("span");

node.id = "**";

if(!(document.getElementById("**"))) {
document.body.appendChild(node);
}

document.getElementById("**").innerHTML = text;
}

</script>

[/code]

Sorry for being slow with this, I'm used to server side scripting where this sort of thing is more of a given.
Copy linkTweet thisAlerts:
@aj_nscOct 04.2008 — ** is not a valid id. Change it to some string, like "sunrise" or "sunset". It doesn't matter where the text variable comes from, it just isn't working for you right now because ** is not a valid id.

If you want to change the id of the span to a variable, just make it a variable as in normal javascript, and use it in the document.getElementById as well such as:

<i>
</i> var myid = "sunrise"
node.id = myid;
document.getElementById(myid)


No problem for being 'slow' post back if that didn't clarify it enough for you.
Copy linkTweet thisAlerts:
@allanibanezauthorOct 04.2008 — I'll show the actual code that I'm working on at the moment.

var end is the string that i want to display to the user

[code=html]
 var end = (maketime(eventactual));
var node = document.createTextNode(end);
document.body.appendChild(node);
[/code]

What I can't get my head round is how to create the condition statement to prevent the node being repeated. In the code you showed me that used the form id's in an if statement, it worked perfectly - the string was replaced each time the form button was pressed. Now that I'm not using the form Id's as an input to the node, I'm a little stuck.

What's in my head is something like this...

if(node value doesn't already exists){

give node the value of var end and output it

}else{

replace the value of node with the current value of var end and output this instead

}
Copy linkTweet thisAlerts:
@allanibanezauthorOct 04.2008 — after a saturday afternoon of persiverance i've managed to sculpt what you showed me into my main application. thanks ?
×

Success!

Help @allanibanez spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...