Tuesday, November 18, 2014

Review: What's the div again?

So a div tag is a division block... basically just a named spot on your html form.

In a traditional programming language I can send things to the console but we are programming web page here, so to demonstrate certain piece of code creating certain output, I use a div tag to contain the result. We can use the innerHTML method to put new values in.

We also put any editable items on a <form> so we can reference it using document.form name.field name.value to get its value.
We also put a button and set its onClick property so that a line (usually a function) gets called when you click it and you determine what you want to do in that function.

Example: Watch happens when you hit the button below. Whatever you put on the text field will be inserted into the DIV, and the original value will be gone.

<form name="form6c">
Enter something, it will be inserted below: <input type="text" name="something" value="hello my friend"/>
<input type="button" value="click me" onclick="document.getElementById('somediv').innerHTML = document.form6c.something.value"/>
</form>
--- somediv start ---<br>
<div id="somediv">
This is my original value
</div>
--- somediv end ---<br>
Enter something, it will be inserted below:
--- somediv start ---
This is my original value
--- somediv end ---

No comments:

Post a Comment