Publishing a description about a selected band This is a basic program I wrote that lets you select a band, and give a description about the band and publish what you wrote.

Are there ways I can apply concepts of OOP to improve this code?  Any help and tips would be greatly appreciated!

(I tried to put this on JSFiddle, but it was rendering differently.)

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Foo&lt;/title&gt;
            &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;        
    &lt;body&gt;
        &lt;form name="form1"&gt;
            &lt;input type="radio" name="band" value="Led Zeppelin" /&gt;Led Zeppelin &lt;br /&gt; 
            &lt;input type="radio" name="band" value="Red Hot Chili Peppers" /&gt;Red Hot Chili Peppers &lt;br /&gt;
            &lt;input checked="checked" type="radio" name="band" value="The Beatles" /&gt;The Beatles &lt;br /&gt;
            &lt;input type ="text" name="description" value="Enter something"/&gt; &lt;br /&gt;
        &lt;/form&gt;                   
        &lt;button onclick="addEntry()"&gt;Add row&lt;/button&gt;
        &lt;hr id="start"/&gt;
        &lt;div id="container"&gt;&lt;/div&gt;
        &lt;hr id="end"/&gt;
        &lt;button onclick="removeEntry()"&gt;Remove most recent entry&lt;/button&gt;        
        &lt;script&gt;
            function getRadioValue(){
                for(i=0; i&lt;document.form1.band.length; i++){
                    if(document.form1.band[i].checked){
                        return document.form1.band[i].value;
                    }                    
                }
            }
            function getDescription(){
                return document.form1.description.value;
            }
            function numOfEntries(){
                return document.getElementById("container").childNodes.length + 1;
            }
            function addEntry(){
                var band = getRadioValue();
                var desc = getDescription();
                var element = document.createElement("div");
                var element_content = document.createTextNode(numOfEntries() + '. ' + getRadioValue() + ", " + getDescription());
                element.appendChild(element_content);

                var container = document.getElementById("container");
                container.appendChild(element);                   
            }
            function removeEntry(){
                var containerElm = document.getElementById("container");
                if(containerElm.childNodes.length&gt;0){
                    containerElm.removeChild(containerElm.lastChild);
                }
            }            
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
I have several comments on both your HTML and your JS.

We'll start with the HTML:


You can keep it much cleaner by separating Javascript from it completely. For example, instead of doing this:

&lt;button onclick="addEntry()"&gt;Add row&lt;/button&gt;


you would do this:

&lt;button id="add-entry"&gt;Add row&lt;/button&gt;


and in your script:

$('#add-entry').on('click', addEntry);  // binds addEntry() to the 
                                        // click handler for that element

You don't need a form element as you aren't submitting anything. See my revised version below for how to access the checked radio option with jQuery.
I would use div elements instead of br to create new lines, because it will be much easier to go in later and change the style (for example, if you wanted to add padding, or increase the spacing between the radio options).
You can use an ol element to get a numbered list instead of manually inserting a number next to each new entry.


JS:


You included jQuery but you're not using it anywhere in your code (it makes it very easy to manipulate the DOM).
You can put these statements inside a $(document).ready() block, which means they will get executed when the document is guaranteed to be ready for manipulation.
In addEntry() you have a couple variables that you didn't use at all.


To answer your question, I wouldn't use an OO paradigm for this at all. You aren't doing anything that OOP would improve or make easier. Here is my revision of your code with the changes I mentioned above (demo on jsfiddle):

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Foo&lt;/title&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            $(document).ready(function() {
                $('#add-entry').on('click', addEntry);
                $('#remove-recent-entry').on('click', removeRecentEntry);
            });

            function addEntry() {
                var band = $('input[name=band]:checked').val();
                var desc = $('#description').val();
                $('#container').append('&lt;li&gt;' + band + ', ' + desc + '&lt;/li&gt;');
            }

            function removeRecentEntry() {
                $('#container li').last().remove();
            }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;&lt;input type="radio" name="band" value="Led Zeppelin"&gt;Led Zeppelin&lt;/input&gt;&lt;/div&gt;
        &lt;div&gt;&lt;input type="radio" name="band" value="Red Hot Chili Peppers"&gt;Red Hot Chili Peppers&lt;/input&gt;&lt;/div&gt;
        &lt;div&gt;&lt;input checked="checked" type="radio" name="band" value="The Beatles"&gt;The Beatles&lt;/input&gt;&lt;/div&gt;

        &lt;div&gt;&lt;input id="description" type="text" value="Enter something"/&gt;&lt;/div&gt;

        &lt;button id="add-entry"&gt;Add row&lt;/button&gt; &lt;button id="remove-recent-entry"&gt;Remove most recent entry&lt;/button&gt;
        &lt;hr id="start"/&gt;
        &lt;ol id="container"&gt;&lt;/ol&gt;
        &lt;hr id="end"/&gt;
    &lt;/body&gt;
&lt;/html&gt;