Re-Introduction to HTML

#1

I am refamilarizing myself with html. I started with the What is the DOM example at : https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#What_is_the_DOM

in the section: Testing the DOM API. -----> CODE COPIED BELOW

I copied this text into a document. Saved it as html. Verified the file is a HTML by checking the properties on the file.

When open in Mozilla browser, it shows the code instead of the rendering of the text and buttons as expected. Javascript is enabled on my browser

What do I need to do to get the html to “run”?

<html>
  <head>
    <title>DOM Tests</title>
    <script type="application/javascript">
    function setBodyAttr(attr, value){
      if (document.body) eval('document.body.'+attr+'="'+value+'"');
      else notSupported();
    }
    </script>
  </head> 
  <body>
    <div style="margin: .5in; height: 400;"> 
      <p><b><tt>text</tt></b></p> 
      <form> 
        <select onChange="setBodyAttr('text',
        this.options[this.selectedIndex].value);"> 
          <option value="black">black 
          <option value="darkblue">darkblue 
        </select>
        <p><b><tt>bgColor</tt></b></p>
        <select onChange="setBodyAttr('bgColor',
        this.options[this.selectedIndex].value);"> 
          <option value="white">white 
          <option value="lightgrey">gray
        </select>
        <p><b><tt>link</tt></b></p> 
        <select onChange="setBodyAttr('link',
        this.options[this.selectedIndex].value);">
          <option value="blue">blue
          <option value="green">green
        </select>  <small>
        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
        (sample link)</a></small><br>
      </form>
      <form>
        <input type="button" value="version" onclick="ver()" />
      </form>
    </div>
  </body>
</html>
#2

Please share code? There are multiple code samples on the linked page

Right click on the file, and select: properties, verify its indeed a html file. (if you need help, upload a screenshot of the properties of the file)

#3

Done … code executed. Will need to look at sources if possible.

#4

so its working now? :slight_smile:

what do you mean?

#5

Code works when embedded in another html file. How can I get the code to work stand-alone?

#6

define embedded? If done right, it should work as stand-alone file. These problems are so difficult to troubleshoot over a forum. Create a new html file, ensure you select all file types when saving the file, so you give the file its type by extension in the name

#7

Good news - works!. Used Notebook over the editor which showed ‘html’ as a selectable file type.

#8

or simple select all types if html is not enviable as selectable file type, and provide the file type through the extension. If you leave it to .txt for example, it will be a txt file regardless of the extension you give it (for windows that is)

#9

Using the document.getElementById(id) with the following code snippet what is error thrown is expected?

    var parentDOM = document.getElementById('parent-id');
    var test1=parentDOM.getElementById('test1');
    //throw error
    //Uncaught TypeError: parentDOM.getElementById is not a function

//

#10

i don’t know how and where parentDOM is defined. This should be a separate topic given its a different question

#12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.