So I have now completed my second JavaScript exercise, short, sweet, and right below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Second Javascript Lesson</title>
</head>
<body>
<script>
function relister ()
{var text = document.getElementById('text').value;
var count = document.getElementById('count').value;
var zelda = document.getElementById('zelda');
while (count>0)
{zelda.innerHTML=zelda.innerHTML+"<p>"+text+"</p>";
count=count-1}}
</script>
<form>
Text: <input type="text" name="text" id="text" /><br>
Count: <input type="text" name="count" id="count" /><br>
</form>
<button type="button" onclick="relister ()">Submit</button>
<div id="zelda">
</div>
</body>
</html>
The idea with this exercise was for me to learn how to grab input for the user and then be able to manipulate it with JavaScript. So I needed to let a web-surfer enter a string or phrase, and then a number separately, and then when they hit a button this would list that phrase that number of times at the bottom of the page. I actually learned a little HTML that I didn't know before this as I had never really created any sort of form or input button just using basic HTML code before. Previously I had used a graphics editing software to make custom buttons and the like.
To be able to pull information from a form you have to define that information as a variable. You then set that newly defined variable=document.getElementByID('destinationID').value in order to tell your script to pull the value of that variable from the input in the form. You do have to be careful to link the form's HTML id tag inside the quotes exactly to the right variable's tag inside it's quotes and parenthesis. Then create another variable and div id tag matchup where you want to write your output text. Finally you put in the while JavaScript above the loop that actually writes the new content. The while loop will keep writing the new content until the count hits zero, and every time it writes the content the count is reduced by one. Finally by adding the new writing to the current content of the div tag we can insure the lines are repeated, rather than replaced.
No comments:
Post a Comment