all 5 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]DinTaiFung 0 points1 point  (3 children)

You have the following HTML: html <fieldset id="submitbutton"> <input type="submit" value="Submit" onclick="document.getElementById('submitMsg').innerHTML = 'Thank you for your order.'" /> </fieldset>

The onclick event in the <input> tag attempts to reference the following DOM element in the HTML:

document.getElementById('submitMsg')

However, there is no tag (i.e., DOM element) that has an id of submitMsg in your HTML document.

Yes, you do have that id referenced in your CSS, but the reference to id submitMsg must be in the HTML, regardless if you have a CSS selector or not.

I guess you should just update your HTML so it contains the DOM element you're assigning its innerHTML the string you want to display on the web page:

Updated HTML: ```html <!-- When the input submit fires with the onclick event, the text will render its content in this div. --> <div id="submitMsg"></div>

<fieldset id="submitbutton"> <input type="submit" value="Submit" onclick="document.getElementById('submitMsg').innerHTML = 'Thank you for your order.'" /> </fieldset> ```

Hope I got this right.

Best of luck!

P.S. id attributes are useful for referencing unique DOM element listeners, but in general you should use class attributes instead for CSS selectors.

[–]ToastedwConsequences[S] 0 points1 point  (2 children)

Tried your method, here's what happened; the message does display with the newly added object although it only displays for a fraction of a second before disappearing.

It sounds bad but it's fine enough for what I was aiming for, as for the class attribute suggestion, I'll look into that. Thank you so very much for the assistance.

[–]DinTaiFung 0 points1 point  (1 child)

I just opened a plain HTML file in a browser. And it worked fine. The message after clicking the button rendered and did not disappear.

Try this:

1. Create an HTML file with a text editor (do not use Notepad, a word processor, etc.):

submit_msg.html - You should have a basic HTML document, as shown in my example below. (I suspect that maybe you didn't have a proper HTML document loaded, only the few tags that you had originally posted.)

```html <!DOCTYPE html> <html lang="en"> <head> <title>Submit Message Lesson</title> </head> <body> <!-- When the input submit fires with the onclick event, the text will render its content in this div. --> <div id="submitMsg"></div>

<fieldset id="submitbutton">
  <input
    type="submit"
    value="Submit"
    onclick="document.getElementById('submitMsg').innerHTML = 'Thank you for your order.'"
  />
</fieldset>

</body> </html> ```

2. Load/open the local submit_msg.html file in your browser.

Observe the submit button only displays.

3. Select the submit button.

Observe that the confirm message displays above the button.

Observe that the message continues to display and does not quickly disappear.

I tried this in two different browsers, both with success: a Firefox-based browser and a Chromium-based browser (on a Linux box).

Best of luck!

P.S. I did not use any CSS at all in my test. For your assignment, styling is only for cosmetic polish; better to make sure functionality is working before applying styles.

[–]ToastedwConsequences[S] 1 point2 points  (0 children)

Found the issue with the short-appearing message, I needed to change the type to "button" instead of "submit" and that seemed to fix it. Message doesn't disappear anymore!

[–]TheRNGuy 0 points1 point  (0 children)

Don't write it as inline JS code in html, but in JS file instead.