.button: you all look the same to me



  • Okay, so this happened to me some days ago. I was editing some code that, grossly simplifying, looked something like this:

    <form>
    <input class="button" onclick="this.form.display.value = 'You chose 1.';" type="submit" value=" Button 1 ">&nbsp;
    <input class="button" onclick="this.form.display.value = 'You chose 2.';" type="submit" value=" Button 2 ">&nbsp;
    <input class="button" onclick="this.form.display.value = 'You chose 3.';" type="submit" value=" Button 3 ">&nbsp;
    <input name="display" type="text" readonly="readonly" value="">
    </form>

    And I changed the onclick logic of one of the buttons, like so:

    <form>
    <input class="button" onclick="this.form.display.value = 'You chose 1.';" type="submit" value=" Button 1 ">&nbsp;
    <input class="button" onclick="this.form.display.value = 'You chose ' + Math.pow(0.5, -1) + '.'; type="submit" value=" Button 2 ">&nbsp;
    <input class="button" onclick="this.form.display.value = 'You chose 3.';" type="submit" value=" Button 3 ">&nbsp;
    <input name="display" type="text" readonly="readonly" value="">
    </form>

    Go ahead, try this code here: http://pasteall.org/2024/html4strict

    It was entertaining, at the time. Can you predict what will happen without actually clicking?



  • @Zecc said:

    It was entertaining, at the time. Can you predict what will happen without actually clicking?
    I expected it to have the same output as the first snippet, and under IE 6 it does. What does it do for you?



  • You see, the thing is: when I made the change I accidently erased the closing quote of the onclick attribute. The Math code doesn't really matter and I only put it there to throw people off.

    I don't know about IE and I'm not going to reboot to Vista just to find out, but Firefox parses the markup like this:

    <input              # Ok, it's an input element (by defaut, a text input)

       class="button"         # Ok, I'll make it look like a button

       onclick="this.form.display.value = 'You chose 2.'; type="     # JavaScript syntax error!   type =   what?

       submit"                    # HTML Parse error. I'll just ignore the quote and set an empty-valued attribute "submit"

       value="  Button 2  "  # Alright, this is the initial text in the input box

    >

    So I ended up with a text input looking like a button.

    When I pressed it, all I got was a blinking cursor right in the middle of the "button". This was a true WTF moment for me.



  • Ah. I saw the syntax error in the stuff you pasted and figured that you did that unintentionally since you gave me the Math.pow red herring. I therefore corrected the syntax error with the expectation that Math.pow would do something unexpected.



  • I guess The Real WTF is PasteAll.org provides better syntax coloring than my IDE ...



  • @Zecc said:

    I guess The Real WTF is PasteAll.org provides better syntax coloring than my IDE ...
     

    What does your IDE do, then?

    Editplus does it right, seeing submit as an unknown attribute, and its following quote as an invalid one, as it's not preceded by a =. The value attribute is then parsed normally. In that light, PasteAll's colouring is less sophisitcated; merely counting quotes.



  • Actually, I'm not sure if I should blame Zend Studio. It may be a problem not of the parsing itself, but of the low contrasting colors it's configured to use: a somewhere-in-between-hideous-and-acceptable mixture of dark red and purple.

    I'm on vacation this next couple of weeks and I don't have a copy of it at home, so I can't verify which is the case.

    I'm not excluding a "TRWTF was my color perception" on this one.

    EDIT: What I can tell for sure is there weren't any wavy lines or brightly red text.



  • @Zecc said:

    It may be a problem not of the parsing itself, but of the low contrasting colors it's configured to use: a somewhere-in-between-hideous-and-acceptable mixture of dark red and purple.

    Are we talking about one of those being the background colour? Dear God, my eyes hurt just thinking about trying to work with that! 



  • @Jake Grey said:

    Are we talking about one of those being the background colour?
    Argh! That would be really painful, yeah.

    But no, I mean font color for attribute names and values.

    Like Editplus' (below), incidently, only darker.

    Image straight from Editplus' site



  •  Well that's something, though working with it nine to five would still give me eyestrain. I knew there was a reason I'd rather be a technician than a coder...



  • Well, you can change the colours in E+, at least.

    Which I did.

    I'm experimenting with a light-on-dark scheme at home. I'm not quite convinced. Maybe I should use plain back as background, instead of a dark colour.


Log in to reply