<html> <head> <script> function onSave() { let book = {}; let titleElem = document.getElementById("title"); let authorElem = document.getElementById("author"); let publisherElem = document.getElementById("publisher"); let yearElem = document.getElementById("year");
book.title = titleElem.value; book.author = authorElem.value; book.publisher = publisherElem.value; book.year = yearElem.value;
alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: " + book.publisher + "\nYear: " + book.year); }</script> </head> <body> <form>
<label>Title <input id="title" type="text"/></label> <label>Author <input id="author" type="text"/></label> <label>Publisher <input id="publisher" type="text"/></label> <label>Year <input id="year" type="text"/></label> <button type="confirm" onClick="onSave()">Save</button></form> </body> </html> (Edited: 2017-04-12)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>In Class Excercise</title> </head> <body> <label for="title">Title</label> <input id="title" type="text" name="title" /> <label for="author">Author</label> <input id="author" type="text" name="author" /> <label for="year">Year</label> <input id="year" type="text" name="year" /> <input type="submit" value="Submit" onclick="showObject()"/> </body> <script> function showObject() { var obj = {}; obj.title = document.getElementById("title").value; obj.author = document.getElementById("author").value; obj.year = document.getElementById("year").value; alert("title: " + obj.title + "author: " + obj.author + "year: " + obj.year); } </script> </html>(Edited: 2017-04-12)
<title>In Class Exercise</title></head> <body>
<form> <input type="text" id="Title" placeholder="Title"/> <input type="text" id="Author" placeholder="Author"/> <input type="text" id="Publisher" placeholder="Publisher"/> <input type="text" id="Year" placeholder="Year"/> <button onclick="display();">Save</button> <script type="text/javascript"> function display(){ var title = document.getElementById("Title"); var author = document.getElementById("Author"); var publisher = document.getElementById("Publisher"); var year = document.getElementById("Year"); var book = [title.value, author.value, publisher.value, year.value]; alert("Title: " + book[0] + " | Author: " + book[1] + " | Publisher: " + book[2] + " | Year: " + book[3]); } </script> </form></body> </html>
<!DOCTYPE html> <html> <head> <title>JS Books</title> </head> <body> <form> <label for="title">Title:</label> <input type="text" name="title" id="titleID" /><br /> <label for="author">Author:</label> <input type="text" name="author" id="authorID" /><br /> <label for="publisher">Publisher:</label> <input type="text" name="publisher" id="publisherID"/><br /> <label for="author">Author:</label> <input type="text" name="year" id="yearID"/><br /> <button onClick="return storeObject();">Save</button> </form> <script type="text/javascript" > var book = new Object(); function storeObject() { book.title = document.getElementById("titleID").value; book.author = document.getElementById("authorID").value; book.publisher = document.getElementById("publisherID").value; book.year = document.getElementById("yearID").value; alert( book.title + "\n" + book.author + "\n" + book.publisher + "\n" + book.year); } </script> </body></html>
<meta charset="UTF-8"> <title>Title</title></head> <body>
<form> <label>Title: </label><input type="text" id="title" name="Title" placeholder="Enter... "/>
<label>Author: </label><input type="text" id="author" name="Author" placeholder="Enter... "/>
<label>Publisher: </label><input type="text" id="publish" name="Publisher" placeholder="Enter... "/>
<label>Year: </label><input type="text" id="year" name="Year" placeholder="Enter... "/>
<button onclick="displayElements();">Save</button>
<script> var book = { Title: , Author: , Publisher: , Year: };
function displayElements() { book.Author = document.getElementById("author").value; book.Title = document.getElementById("title").value; book.Publisher = document.getElementById("publish").value; book.Year = document.getElementById("year").value;
alert("Title: " + book.Title + ", Author: " + book.Author + ", Publisher: " + book.Publisher + ", Year: " + book.Year); }
</script>
</form>
<!DOCTYPE html> <html> <header> <title>title</title> <script type="text/javascript"> function test() { var book = new Object(); book["title"] = document.getElementById("title"); book["author"] = document.getElementById("author"); book["publisher"] = document.getElementById("publisher"); book["year"] = document.getElementById("year"); alert("title: " + book.title.value + "author: " + book.author.value + "publisher: " + book.publisher.value + "year: " + book.year.value); } </script> </header> <body> <form> <label>Title<input type="text" id="title" /></label> <label>Author<input type="text" id="author" /></label> <label>Publisher<input type="text" id="publisher" /></label> <label>Year<input type="number" id="year" /></label> <input type="button" value="save" onclick="return test();" /> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>In Class Exercise 8</title> </head> <body> <form> <label for="Title">Title</label> <input id="Title" type="text"/> <label for="Author">Author</label> <input id="Author" type="text"/> <label for="Publisher">Publisher</label> <input id="Publisher" type="text"/> <label for="Year">Year</label> <input id="Year" type="text"/> <input type="submit" onclick='display();' value="save"/> </form> </body> <script> function display() { var book = new Object(); book.title = document.getElementById('Title').value, book.author = document.getElementById('Author').value, book.publisher = document.getElementById('Publisher').value, book.year = document.getElementById('Year').value; alert("Title: " + book.title + "\n Author: " + book.author + "\n Publisher: " + book.publisher + "\n Year: " + book.year); } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>In-Class Exercise | April 12, 2017</title> <script> function save() { var book = { title: document.getElementById('title').value, author: document.getElementById('author').value, publisher: document.getElementById('publisher').value, year: document.getElementById('year').value } show(book) } function show(book) { alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: " + book.publisher + "\nYear: " + book.year + "\n") } </script> <style> input { display: block; } </style> </head> <body> <form> <label for="title">Title:</label> <input type="text" name="title" id="title"> <label for="author">Author:</label> <input type="text" name="author" id="author"> <label for="publisher">Publisher:</label> <input type="text" name="publisher" id="publisher"> <label for="year">Year:</label> <input type="text" name="year" id="year"> <button onclick="return save()">Save</button> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Exercise 1</title> <script type="text/javascript"> function book(){ var book = new Object(); book.title = document.getElementById("titleID").value; book.author = document.getElementById("authorID").value; book.publisher = document.getElementById("pubID").value; book.year = document.getElementById("yearID").value; alert("Title: " + book["title"] + "\nAuthor: " + book["author"] + "\nPublisher: " + book["publisher"] + "\nYear: " + book["year"]); } </script> </head> <body> <form> Title: <input type="text" name="title" id="titleID" placeholder="Title" maxlength="30">
Author: <input type="text" name="author" id="authorID" placeholder="Author" maxlength="30">
Publisher: <input type="text" name="publisher" id="pubID" placeholder="Publisher" maxlength="30">
Year: <input type="text" name="year" id="yearID" placeholder="Year" maxlength="30">
<input type = "submit" value ="Save" onclick="return book();"/> </form> </body> </html>