Span id with innerHTML set by JS ?

Question

0.00/5 (No votes)

See more:

Hi,

Follow the previous Q/A and thanks to the answer I got. However further test showed a related issue as shown in the test code. The Span ID 'box2' will show the correct result when click Dark but when click Pink, it flash the result but the result would not stay. Why?

I also noted two things: the effect of using:

document.all.box2.innerHTML = s;
    document.getElementById(&quot;box2&quot;).innerHTML = s;

seems the same; and the id in span can not be referred by document.f.box2. The error would again be Null object. Why such inconsistency?

XML

<script language="javascript" type="text/javascript">
function putText(s) {
alert(s);
    document.f.box1.value = s;

    // the two statements have same effect
    //document.all.box2.innerHTML = s;
    document.getElementById("box2").innerHTML = s;

    // can not have this, it does not affect input id but it does affect span id
    //document.f.submit();
}
</script>

<body>
<%
box1 = request("box1")
'box2 = request("box2")
if box1 = "" then
    box1 = "The sky is blue today"
    end if


%>

<form name="f" id="f" method="post">
<input name="box1" id="box1" type="text" value="<%=box1%>" />
<br>Box2=<span id="box2"></span>
<br>
<input type="submit" value="Pink" onClick="putText('Click to Pink Sky')"  />
<input name="test" type="submit" value="Dark"  />

<%
if request("test") = "Dark" then
    response.Write("<script>putText('Submit to get dark sky')</script>")
    end if
%>

</form>
</body>

rgds,
kfl.

Posted 20-Nov-10 10:20am

KFLee

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Not Active · Accepted Answer · 2010-11-20T14:52:00

Solution 1

The input type is submit which is going to cause the form to be submitted back to the server after the javascript is executed, which will cause the page to be re-rendered with the default values.

Either remove the type='submit' or use onClick="putText('Click to Pink Sky'); return false;"

Posted 20-Nov-10 14:52pm

Not Active

Comments

KFLee 21-Nov-10 7:49am

Hi, Thanks for the answer; I tested it and work as you said. Now I start to understand the difference between onclick and submit. Am I right to think that javascript function call is always exected in the browser and only send to server if it encounters a submit inside javascript?