Javascript and the DOM confused?

Question

I am trying to create a simple web app but my tutor is telling me I cant use jQuery or databases (What he is actually saying is that he wants me to use Javascript alone and have the content in the source).

I am confused how JS alone affects the DOM, can it add/modify elements within the html without refresh (like ajax)?

Here is the example:

I need to create a form starting with a <select> element:

<select id="Company">
    <option>Toyota</option>
    <option>Honda</option>
    <option>suzuki</option>
</select>

When the object 'Toyota' is selected a new <select> element needs to appear.

<select id="Model">
    <option>Yaris</option>
    <option>Corolla</option>
    <option>Rukus</option>
</select>

Finally when 'Rukus' is selected a whole lot of information has to show.

<div id="rukus">html</div>

Appreciate the help in advance.

You've given us the problem. Now can you show us the solution you've come up with? We'll help you find the mistake you may have commited. — Gad, Aug 06 '14 at 06:21
Since the DOM is a javascript API to manipulate the content of the HTML/XML document then of course javascript can use the DOM. If you're confused about what the DOM really is then I suggest you do some reading: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model — slebetman, Aug 06 '14 at 06:33

score 0 · Accepted Answer · answered Aug 06 '14 at 06:34

So you should assign a value to each option that relates to the text with the text

<option value="car">car<option>

In the select tag also specify the on change attribute and the name of the function. And then use get element by id to get the value of the selected item.

As for creating a new select tag I would recommend using different divs and again selecting the element by id. And use the .innerHtml attribute to write a string containing your select tag

document.getElementById('elem id').innerHtml = "<select> ... </select>";

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

You can use JS's onchange event to call a JS function, see example on this thread. In JS function you can extend your list accessing the DOM by the link of @slebetman to mozilla source.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 06 '14 at 06:53

jagger

532
1
5
13

Javascript and the DOM confused?

2 Answers2