Help me with a code i wrote.. plz

**Neoeyal** · 07-17-2006, 06:51 PM

Hey.
I wrote this code and put it in the <head> section:

Code:

<script LANGUAGE="JavaScript">
function displaymbkb(obj)
{
var after_text='Its <b>'+obj.value/1000000+'</b> MB and <b>'+obj.value/1000+'</b> KB'
document.write(after_text)
}
</script>

then I wrote this in the <body> section:

Code:

<input type="text" name="canup" size="15" onkeyup="return displaymbkb(this)" value="<? echo $canup; ?>">

When I pressed the Submit button the function worked but it displayed the result in a new page... how can I make it appears in the same page the <input> was?

**Twey** · 07-17-2006, 07:20 PM

Code:

<script LANGUAGE="JavaScript">

The language attribute is deprecated for type.

Code:

<input type="text" name="canup" size="15" onkeyup="return displaymbkb(this)"

You can't document.write() after the page has finished loading, or it will implicitly document.open() and obliterate the contents of your document.

Code:

value="<? echo $canup; ?>">

If you're using short tags anyway, you may as well use the <?=VALUE?> construct.

Code:

<script type="text/javascript">
function displayByteValues(val, op) {
  var opEl = op;
  if(typeof op == 'string') opEl = document.getElementById(op);
  for(var i = 0, e = opEl.childNodes; i < e.length; ++i) // remove all children
    opEl.removeChild(e[i]);
  op.appendChild( // add text
    document.createTextNode("It's ")
  );
  op.appendChild( // add a <b> element
    document.createElement("b")
  ).appendChild( // add text to that <b> element
    document.createTextNode(val / 1024 / 1024)
  );
  op.appendChild(
    document.createTextNode(" MB and ")
  );
  op.appendChild(
    document.createElement("b")
  ).appendChild(
    document.createTextNode(val / 1024)
  );
  op.appendChild(
    document.createTextNode(" KB.")
  );
}
</script>

Code:

<!-- Create a blank span to store the output... -->
<span id="sizeOutput"></span>

<!-- Call the function, passing the value and the ID of the element to which to output... -->
<input type="text" name="canup" size="15" onkeyup="return displayByteValues(this.value, 'sizeOutput');" value="<?=$canup?>">

**jscheuer1** · 07-17-2006, 07:22 PM

document.write will do that. Use an element's innerHTML and write to that, ex:

Code:

<script type="text/javascript">
function displaymbkb(obj){
var after_text='Its <b>'+obj.value/1000000+'</b> MB and <b>'+obj.value/1000+'</b> KB';
document.getElementById('mbkb').innerHTML=after_text;
}
</script>

For this to work, you will need an element with the id used, somewhere in the body:

HTML Code:

<br><span id="mbkb"></span><br>

Unless you want some type of actual submission to occur, make sure your form has action="javascript:void(0)" and no method set. Otherwise, use the action and method most appropriate to your purposes.

**Neoeyal** · 07-17-2006, 07:29 PM

Thanks !!
I have another question:
I have two Input Radios and i want to do that if i check Radio 1 it will show me something lets say "value1" and if i'll check Radio 2 it will show me "value2"

how can I do it ?

**Twey** · 07-17-2006, 08:00 PM

Originally Posted by John

Use an element's innerHTML

innerHTML has several problems that could spring up to ensnare a coder, and will hopefully soon be deprecated. It should be avoided where possible.

I have two Input Radios and i want to do that if i check Radio 1 it will show me something lets say "value1" and if i'll check Radio 2 it will show me "value2"

Use the code above with a simple if statement.

**Neoeyal** · 07-17-2006, 08:17 PM

ok i'll try...

now about the code you wrote
it gives me an error

Object doesn't support this property or method.

**jscheuer1** · 07-17-2006, 10:50 PM

Which code? It seems you recieved two responses here.

**Neoeyal** · 07-17-2006, 11:19 PM

it's about the first code of Twey
but i fixed it..
i did

Code:

onkeyup="return displayMB(this.value, sizeOutput)"

instead of

Code:

onkeyup="return displayMB(this.value, 'sizeOutput')"

look at the sizeOutput .

I have another problem with this script
it seems like it doesn't remove all the children

my code now is:

Code:

<script type="text/javascript">
function displayMB(val, op) {
  var opEl = op;
  if(typeof op == 'string') opEl = document.getElementById(op);
  for(var i = 0, e = opEl.childNodes; i < e.length; i++) // remove all children
    opEl.removeChild(e[i]);
  op.appendChild( // add text
    document.createTextNode("It's ")
  );
  op.appendChild( // add a <b> element
    document.createElement("b")
  ).appendChild( // add text to that <b> element
    document.createTextNode(val * 1024 * 1024)
  );
  op.appendChild(
    document.createTextNode(" MB")
  );
}
</script>

the <input> and the <span>:

Code:

<input type=text name=MB onkeyup="return displayMB(this.value, sizeOutput)"> <span id="sizeOutput"></span>

you can check the bug it does here:
http://www.eyal.webkit.biz/MsU/admin.php
(password- admin)
because i don't know how to explain the problem...
Write a number at the <input> below to "How much MB?"
then delete the number or write another number.. it's getting crazy

what's the solution ?

**Twey** · 07-18-2006, 12:37 AM

Code:

<script type="text/javascript">
function displayMB(el, op) {
 var inEl = (typeof el == 'string' ? document.getElementById(el) : el),
   outEl = (typeof op == 'string' ? document.getElementById(op) : op);

  while(outEl.hasChildNodes())
    outEl.removeChild(outEl.firstChild);

  outEl.appendChild(
    document.createTextNode("It's ")
  );
  outEl.appendChild(
    document.createElement('b')
  ).appendChild(
    document.createTextNode(Math.floor((parseFloat(inEl.value) / 1024 / 1024) * 10000) / 10000)
  );
  outEl.appendChild(
    document.createTextNode(" MB")
  );
}
</script>

Code:

<input type="text" name="MB" onkeyup="displayMB(this, 'sizeOutput');">
<span id="sizeOutput"></span>

Sorry, I'm new to all this new-fangled DOM malarkey too, but thanks to Mike Chambers, I have discovered a Better Way of Doing Things.

I even added some rounding code.

**jscheuer1** · 07-18-2006, 02:40 AM

Originally Posted by Twey

innerHTML has several problems that could spring up to ensnare a coder, and will hopefully soon be deprecated. It should be avoided where possible.Use the code above with a simple if statement.

What exactly could those be? I mean, just about every method or technique used in code has its potential problems. As things stand now though, in my experience, the DOM is a less reliable method because it is newer and not as universally supported, and where it is supported, not uniformly so. As a way to dynamically change an existing element, it is far more complex than need be.

I agree that innerHTML has its problems. But considering that even universally deprecated elements, let alone code, still enjoy wide and effective use, I would not count on its disappearing anytime soon.

Don't get me wrong. I like the DOM and am happy to use it in original code and to work with it in existing code when it is a good way to deal with the task at hand.

I would caution you though, Twey. In your exuberance to abandon innerHTML and embrace the DOM, especially in light of your tendency to ignore the limitations of IE, you may find yourself writing niche code, without even realizing it.

Oddly enough, if you think about it, innerHTML still suffers from some of the same problems since its introduction as the DOM methods now do. Except that, with innerHTML, this is no longer the case in the typical modern browser. So, I wouldn't necessarily say one is better than the other but that certain situations seem tailor made for one or the other and that, whichever you use, one must continue to code for as wide an audience as possible.

Thread: Help me with a code i wrote.. plz

Thread Tools

Search Thread

Help me with a code i wrote.. plz

Bookmarks

Bookmarks

Posting Permissions