I am new to javascript. The assignment is below. I have attached what I have com
ID: 3856951 • Letter: I
Question
I am new to javascript. The assignment is below. I have attached what I have completed so far. I have the page working but the buttons only work the first time through and I can't seem to figure out why. My code is attached.
Part 1; a simple slide show: Create a Web document called l5p1.html that displays one of the images from lab 2 in approximately the center of the page; centering need not be exact. Below the image, place three button elements labeled with the names of items from lab 2. (One of them must be the name of the item you chose to display.) Pressing a button should change the displayed image to that of the item named on the button. (Hint: There are at least two ways to do this that are discussed in the book. Think about the zIndex: and the visibility: property.) You may use any of these approaches, but please think about all of them. Create a link to this document from your index page.
In no more than a couple of paragraphs, explain which of the possible techniques you chose and why you chose it. Place your write-up below the buttons, on the same page.
twrigh 12@weblab/public htm IDOCTYPE html> html> chead Lab Exercise 5 Part 1 I! [CDATA function showSaw () dom dom document.getElementById("Saw").style if (dom.visibility"visible") else document.getElementById ("Saw").style; = dom.visibility"isble" dom.visibility "visible" tunction showPlicrs() dom document.geLElementByld("Pliers").style if (dom.visibility "visible") else dom.visibilityble" dom.visibility "visible" function showPitchfork do document.getElementByld("pitchlork") style iE (dom.visibility"visible" if (dom.visibility "visible") == dom . visibility "visible"; = clsc dom.visibility "visible" «img src="/tools/pitch fork.jpg" alt-" Pitchfork" id-"pitchtork" height-"300" width-"450" style-"position:absolute top: 200px: lett: 420px: visibility: hidden:"> cinput type-"button" value-"Saw style-"position: relative; top: 600px left: 400px onclick-"showsaw()" > kinput type-"button" valuo-"plier input type-"button" value-"Pliers" style "position: relaivei top: 600px leL: 520px kinput type- "button" value-"Pitchfork" style-"position: relative: top: 600px: left: 640px: onclick-"showPitchfork " pstyle-"position: relative: top: 660px left: Opx:">Paragrapha here Get Help Read Pile Where Is Prev Page Next Page Cut Text UnC Cur Pos To Spell Justify ut Text 9:14 AM O Type here to search 7/14/2017Explanation / Answer
$(document).ready(function() {
for (i = 0; i < document.getElementsByClassName("box-product").length; i++) {
document.getElementsByClassName("name")[i].setAttribute(
"alt", document.getElementsByTagName("img")[i].src);
}
});
.box-product {
display: inline-block;
border: 1px gray solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
<!-- Product 0001 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>
Image uploading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<h1>Upload Your Images</h1>
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
</form>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
body {
font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
padding:10px;
}
h1 {
margin-top:0;
}
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo "<h2>Successfully Uploaded Images</h2>";
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.