Search the Community
Showing results for tags 'click'.
-
Hello, i'm new to javascript and currently in a bootcamp course to become a software developer. that being said there are a lot of new ideas that have been thrown at me in the past couple weeks and i'm having trouble completing our assignment for the week. I've been tasked with creating a site that takes an input and pushes it into an array and when a button is clicked that array gets made into a card that houses a name, a hogwarts house and a button. the button on these cards needs to be able to delete the card that the button is on. I've been able to do everything up until this point. i. can't get the button to only delete one card. it deletes every card, and even when i get the button to delete one card it won't delete any other card. how do i get this to work? I'll post my code so that gives better context. //html below <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> </head> <body> <div id="jumbo" class="jumbotron"> <h1 class="display-4">Sorting Hat</h1> <p class="lead">Hello muggles, are you a big fan of Harry Potter? </p> <hr class="my-4"> <p>Well you are in luck. Now you will be able to use this website to try on the sorting hat and see which house you will be sorted into.</p> <p class="lead"> <a id="initForm" class="btn btn-primary btn-lg" onclick="openForm();" href="#" role="button">Lets Get It Started!</a> </p> </div> <div id="form"> <form class="form-inline"> <h3 class="display-6">Enter First Year's Name</h3> <div class="form-group mx-sm-3 mb-2"> <label for="insertName" class="sr-only">name</label> <input type="text" class="form-control" id="insertName" placeholder="Harry Potter"> </div> <button id="sort" type="submit" class="btn btn-primary mb-2">Sort</button> </form> </div> <div id="studentCard"></div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="main.js"></script> </body> </html> //css below body { background-color: slategray; } #form{ display: none; } .expel{ background-color: blueviolet; padding: 15px 30px; } a{ list-style-type: none; color: white; } a:hover{ list-style-type: none; color: white; } //javascript below console.log("HelloWorld!"); //print to dom function for innerhtml const printToDom = (divId, textToPrint) => { console.log(textToPrint); const selectedDiv = document.getElementById(divId); selectedDiv.innerHTML = textToPrint }; //this is my hogwarts array const hogwartsHouse = [ 'Griffindor', 'Hufflepuff', 'Slytherin', 'Ravenclaw' ]; //this variable grabs the users input into my form const names = document.getElementById("insertName"); //this variable sets the student id to 0 //student id is located inside the sort init function let studentId = 0; const students = []; //this function allows my form to be seen function openForm() { x = document.getElementById("form"); if(x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }; //this function builds the card const sortBuilder = (sortingHat) => { let domString = ''; for(let i = 0; i < sortingHat.length; i++){ domString += `<div id="cardContainer">` domString += `<div class="card" style="width: 18rem;">` domString += `<div class="card-body">` domString += `<h5 class="cardTitle">${sortingHat[i].name}</h5>` domString += `<p class="card-text">${sortingHat[i].house}</p>` domString += `<a onclick="expelStudentEvent()" id="${sortingHat[i].id}" href="#" class="expel">Expel</a>` domString += `</div>` domString += `</div>` domString += `</div>` } printToDom('studentCard', domString) }; //make function for expel students events //loops over all of the expel buttons //adds the remove student function to each button //need remove student function //remove student with the id that is equal to the id of the button, e.target.id //pass in id of the card i'm clicking //i want this function to delete 1 card when the button on said card is clicked const expelStudentEvent = () => { let domString = ''; for(let i = 0; i < students.length; i++){ domString += `` } if(students.length = 0){} console.log(students) printToDom('studentCard', domString); }; //this function takes my users input into the form and my hogwarts array into an array that gives each input an id const sortInit = (e) => { const student = { id: studentId, name: names.value, house: hogwartsHouse[Math.floor(Math.random() * hogwartsHouse.length)], } students.push(student); console.log(students); studentId++; sortBuilder(students); }; // const removeCard = () => { // let myCard = document.getElementById(e.target.id); // } //this function holds my event listeners const events = () =>{ document.getElementById('sort').addEventListener('click', sortInit) document.getElementById(e.target.id).addEventListener('click', expelStudentEvent) } //this function holds all of the previous functions const init = () => { openForm(); sortBuilder(students); events(students) expelStudentEvent(e) sortInit(expelStudentEvent) }; //this function executes all functions init(); any advice or solutions you can give would be most welcome.
- 2 replies
-
- javascript
- dom
-
(and 1 more)
Tagged with:
-
Hi everyone, I am really enjoying your book Larry, thanks. My problem is I am on the page where you use the header function and javascript to display the images from the uploads folder. I have one picture and for some reason when I click it, it does nothing. Would anyone care to look at my code or give me some hints as to why it is not working? I have tried the following: Compare my code to Larry's code Used Larry's code Enabled pop-ups Moved the javascript folder to a different location (a folder above and then changing the a href to ../javascript) images.php <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Images</title> <script type="text/javascript" charset="utf-8" src="js/function.js"></script> </head> <body> <p>Click on an image to view it in a separate window.</p> <ul> <?php # Script 11.4 - images.php // This script lists the images in the uploads directory. $dir = '../uploads'; // Define the directory to view. $files = scandir($dir); // Read all the images into an array. // Display each image caption as a link to the JavaScript function: foreach ($files as $image) { if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period. // Get the image's size in pixels: $image_size = getimagesize ("$dir/$image"); // Make the image's name URL-safe: $image_name = urlencode($image); // Print the information: echo "<li><a href=\"javascript:create_window('$image_name',$image_size[0],$image_size[1])\">$image</a></li>\n"; } // End of the IF. } // End of the foreach loop. ?> </ul> </body> </html> function.js //Script 11.3 - function.js function create_window (image, width, height) { //Add some pixels to the width and height: width = width + 10; height = height + 10; //If the window is already open resize it ot the new dimensions if (window.popup && !window.popup.closed) { window.popup.resizeTo(width, height); } //Set the window properties: var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height; //Set the URL: var url = "show_image.php?image=" + image; //Create the pop-up window: popup = window.open(url, "ImageWindow", specs); popup.focus(); } //End of function show_image.php <?php # Script 11.5 - show_image.php // This page displays an image. $name = FALSE; // Flag variable: // Check for an image name in the URL: if (isset($_GET['image'])) { // Make sure it has an image's extension: $ext = strtolower ( substr ($_GET['image'], -4)); if (($ext == '.jpg') OR ($ext == 'jpeg') OR ($ext == '.png')) { // Full image path: $image = "../uploads/{$_GET['image']}"; // Check that the image exists and is a file: if (file_exists ($image) && (is_file($image))) { // Set the name as this image: $name = $_GET['image']; } // End of file_exists() IF. } // End of $ext IF. } // End of isset($_GET['image']) IF. // If there was a problem, use the default image: if (!$name) { $image = 'images/unavailable.png'; $name = 'unavailable.png'; } // Get the image information: $info = getimagesize($image); $fs = filesize($image); // Send the content information: header ("Content-Type: {$info['mime']}\n"); header ("Content-Disposition: inline; filename=\"$name\"\n"); header ("Content-Length: $fs\n"); // Send the file: readfile ($image); here are how to folders are set up: xamp-->htdocs-->Learning-->(all php files) xamp-->htdocs-->Learning-->javascript-->function.js xamp-->htdocs-->uploads I also created an xampp-->uploads folder, but the files do not upload there and the scripts do not see the pictures in that folder. Thanks for everyone's help.......