How do I get around this one

**Steve Sea** · 05-07-2007, 07:25 PM

Every time I press a button it adds another number on screen, what I need is if someone presses a button then changes their mind and presses another button it resets or clears the first choice, I've been pulling my hair out on this one, any Ideas, I bet it's something simple

Here's the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

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

function showNumber(number) {

obj = document.getElementById(number);

  if (obj.style.display == "none") {
    obj.style.display = '';
  }

  else {
    obj.style.display = 'none';
  }
}
</script>
 </head>
<body>
 Thousands
<form name="Thousum">
<input name="Thousands" type="button" onclick="showNumber('une mille');" value="1000"><br>
<input name="Thousands" type="button" onclick="showNumber('deux milles');" value="2000"><br>
<input name="Thousands" type="button" onclick="showNumber('trois milles');" value="3000"><br>
<input name="Thousands" type="button" onclick="showNumber('quatre milles');" value="4000"><br>
<input name="Thousands" type="button" onclick="showNumber('cinq milles');" value="5000"><br>
<input name="Thousands" type="button" onclick="showNumber('six milles');" value="6000"><br>
<input name="Thousands" type="button" onclick="showNumber('sept milles');" value="7000"><br>
<input name="Thousands" type="button" onclick="showNumber('huit milles');" value="8000"><br>
<input name="Thousands" type="button" onclick="showNumber('neuf milles');" value="9000"><br>
<input name="Thousands" type="button" onclick="showNumber('dix milles');" value="10,000"><br>



<div id="une mille" style="display: none;"><h2>une mille</h2></div>
<div id="deux milles" style="display: none;"><h2>deux milles</h2></div>
<div id="trois milles" style="display: none;"><h2>trois milles</h2></div>
<div id="quatre milles" style="display: none;"><h2>quatre milles</h2></div>
<div id="cinq milles" style="display: none;"><h2>cinq milles</h2></div>
<div id="six milles" style="display: none;"><h2>six milles</h2></div>
<div id="sept milles" style="display: none;"><h2>sept milles</h2></div>
<div id="huit milles" style="display: none;"><h2>huit milles</h2></div>
<div id="neuf milles" style="display: none;"><h2>neuf milles</h2></div>
<div id="dix milles" style="display: none;"><h2>dix milles</h2></div>


</form>



</body>
</html>

Many Thanks

Steve C.

**jscheuer1** · 05-07-2007, 07:37 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

function showNumber(number) {
obj = document.getElementById('milles').innerHTML=number;
}
</script>
 </head>
<body>
<div> Thousands</div>
<form action="" name="Thousum">
<div>
<input name="Thousands" type="button" onclick="showNumber('une mille');" value="1000"><br>
<input name="Thousands" type="button" onclick="showNumber('deux milles');" value="2000"><br>
<input name="Thousands" type="button" onclick="showNumber('trois milles');" value="3000"><br>
<input name="Thousands" type="button" onclick="showNumber('quatre milles');" value="4000"><br>
<input name="Thousands" type="button" onclick="showNumber('cinq milles');" value="5000"><br>
<input name="Thousands" type="button" onclick="showNumber('six milles');" value="6000"><br>
<input name="Thousands" type="button" onclick="showNumber('sept milles');" value="7000"><br>
<input name="Thousands" type="button" onclick="showNumber('huit milles');" value="8000"><br>
<input name="Thousands" type="button" onclick="showNumber('neuf milles');" value="9000"><br>
<input name="Thousands" type="button" onclick="showNumber('dix milles');" value="10,000"><br>


<h2 id="milles"></h2>
</div>
</form>



</body>
</html>

**Twey** · 05-07-2007, 08:23 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <title>T</title>
    <script type="text/javascript">
      function showNumber(number) {
        var obj = document.getElementById("milles");
        if(!obj.firstChild)
          obj.appendChild(document.createTextNode(number));
        else
          obj.firstChild.nodeValue = number;
      }
    </script>
  </head>
  <body>
    <form name="Thousum" action="">
      <div>
        <fieldset>
          <legend>Thousands</legend>
          <input name="Thousands" type="button" onclick="showNumber('une mille');" value="1000">
          <input name="Thousands" type="button" onclick="showNumber('deux milles');" value="2000">
          <input name="Thousands" type="button" onclick="showNumber('trois milles');" value="3000">
          <input name="Thousands" type="button" onclick="showNumber('quatre milles');" value="4000">
          <input name="Thousands" type="button" onclick="showNumber('cinq milles');" value="5000">
          <input name="Thousands" type="button" onclick="showNumber('six milles');" value="6000">
          <input name="Thousands" type="button" onclick="showNumber('sept milles');" value="7000">
          <input name="Thousands" type="button" onclick="showNumber('huit milles');" value="8000">
          <input name="Thousands" type="button" onclick="showNumber('neuf milles');" value="9000">
          <input name="Thousands" type="button" onclick="showNumber('dix milles');" value="10,000">
        </fieldset>
        <p id="milles">&nbsp;</p>
      </div>
    </form>
  </body>
</html>

Avoids the use of the non-standard innerHTML. Also I think John's use of <h2> was something of an abuse :-\

**jscheuer1** · 05-07-2007, 09:56 PM

I really don't think it makes that much difference. The validator was tentative on your version though, Twey.

**Twey** · 05-08-2007, 10:39 AM

You should read the SlayerOffice article on the matter. innerHTML is non-standard, doesn't work in XHTML with most browsers, and drops a lot of information that really needn't or shouldn't be dropped.

The validator was tentative on your version though, Twey.

It wouldn't be on a server, though.

**jscheuer1** · 05-08-2007, 02:41 PM

I am aware of problems with innerHTML. Forms even happen to be a spot where it can be particularly tricky. However, used in the manner in which I employed it, it is probably more or at least as cross browser as the DOM method you employed. DOM methods (as can innerHTML, as can any javascript method) can cause problems if not used appropriately. This is no reason not to use them appropriately.

Yes, your page should be good on a properly configured server.

**Twey** · 05-08-2007, 04:55 PM

DOM methods (as can innerHTML, as can any javascript method) can cause problems if not used appropriately. This is no reason not to use them appropriately.

Certainly, but there's also the fact that it's absolutely non-standard. That is a reason to avoid it, appropriate or not. It could perhaps be used as a fallback from the DOM method I posted above, but the standard methods should always be used if possible.

Yes, your page should be good on a properly configured server.

Yes. If the server isn't configured properly, the poster has bigger problems to worry about. I think it's safe to assume a correctly-configured server.

**jscheuer1** · 05-08-2007, 05:17 PM

Until reading the Slayer (those folks are right up your alley, from what I know of them) article, I really had no idea how non-standard innerHTML is. Apparently, not much in the real world. If you code in HTML, according to the piece, no problem. There are a whole host of things that are according to standard in HTML that won't fly in the type of environment mentioned in that article. The fact that innerHTML hasn't been canonized as a part of the HTML standard is virtually meaningless in that context.

It's typing out of both sides of your editor if, on the one hand you council folks not to use xml if they don't understand it, and have them code for it on the other.

About servers - if we assume a standards compliant world for our coding, we face pitfalls, just as we would if we assume an error-correcting world.

We cannot realistically code for both unless we make our lives about knowing every little nuance of both standards and real life conditions, but we can do some basic things in that regard, like specifying character encoding and validating our work.

I really don't mean to be contentious. So, I feel compelled to add that your approach (which I see as a crusade for standards) isn't horrible and most of the time will get the job done if followed to its complete logical conclusion in any given project. That journey can be quite long in some cases though.

**Twey** · 05-08-2007, 05:31 PM

It's typing out of both sides of your editor if, on the one hand you council folks not to use xml if they don't understand it, and have them code for it on the other.

I disagree entirely. XHTML is currently not a good idea for general-purpose sites; we know this to be true. However, when there is little cost, there's no reason to deliberately avoid compatibility. I personally tend to stick as close to XHTML as the HTML specification allows without it actually being XHTML, because it does indeed look as if that will be the future of the Web. It isn't right now, obviously, but that's no reason not to minimise the modifications one will have to make if it does become so.

About servers - if we assume a standards compliant world for our coding, we face pitfalls, just as we would if we assume an error-correcting world.

As I said, if the server isn't sending a content type properly, the poster should fix that before doing anything else. Relying on <meta> tags for this purpose is not a good idea, especially in this case where the forum converts any non-ISO-8859-1 characters to HTML entities, which the poster's editor probably will not do. There aren't any in your particular post, of course, but it's still a bad idea.

We cannot realistically code for both unless we make our lives about knowing every little nuance of both standards and real life conditions, but we can do some basic things in that regard, like specifying character encoding and validating our work.

Here we have an example of typing out of both sides of one's editor (nice phrase, by the way). There is little point in validating one's HTML (i.e. making it conform to standards) if one then goes on to write "invalid" (non-conforming) Javascript. Using innerHTML in Javascript is little different to using a <marquee> tag in HTML. The only difference is that the validator doesn't pick up on Javascript errors, so it still gets the "green flag." If the only reason one cares about validating is to sell one's site, then there's no issue with this; however, for those who want the future-proofing following standards (in most cases) brings, it doesn't matter whether you get the "green flag" if the page is still non-standard.

Thread: How do I get around this one

Thread Tools

Search Thread

How do I get around this one

Bookmarks

Bookmarks

Posting Permissions