Jump to content

Ingolme

Moderator
  • Posts

    14,894
  • Joined

  • Last visited

  • Days Won

    174

Everything posted by Ingolme

  1. Usually, since the enum field has a small number of options and they never change, you just need to hardcode the options instead of trying to get a list of all of them from the database. To select an option in a dropdown based on the data from a database query, you just need to check whether the value from the database is equal to the value of the dropdown option. <?php $row = query->fetch(); // Code to get a database row from a query $options = [ 'Computer', 'Laptop', 'Smartphone' ]; ?> <select name="device"> <?php foreach($option as $option) { // Select the option if the row matches it // I'm assuming your database has a field named "device" which stores the ENUM value. $selected = ''; if($option == $row['device']) { $selected = ' selected' } // Write the HTML code for the option echo "<option value='{$option}' {$selected}> {$option} </option>"; } ?> </select>
  2. Have you gone through the Javascript tutorial? You should have enough information after reading it to be able to solve this.
  3. You gave the same id to both textareas. When the Javascript code asks for an element with id = "myInput", the browser doesn't know which of the two you want, so it selects the first one.
  4. All you need to do is replace the input element with a textarea. It is allowed to hold much larger amounts of text and can be given width and height with CSS if necessary. <textarea id="myInput" cols="40" rows="10">Paragraphs of text go in here</textarea>
  5. The block of code I provided should work as long as the HTML for the modal box and the images is there and the Javascript code is further down in the document than the elements are. If it's not working, check the browser developer tools to see if any errors appear.
  6. That line of code has to go at the very beginning before the variable "balloon" is used. I haven't read the book, but I think the game is just there for teaching purposes so it's not going to be amazing. A decent game would require a whole lot more code. If you're just copying code from the book without trying to understand what it does, you won't learn anything. You need to read the parts of the book which explain how the code works so that you can write your own code and use your own skill to create more complex things.
  7. Have you added the meta viewport tag to your page? This is necessary for a responsive website. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. Did you update the <img> tags to use a class attribute instead of an id?
  9. The toString() method of Javascript numbers lets you choose a base. If you choose base 16 it will be shown as hexadecimal. Here's how to generate a random number and show it in hexadecimal: // Find a random number between min and max (inclusive) let min = 64; let max = 255; let range = 1 + max - min; let number = Math.floor(Math.random() * range + min); // Display the number as hex let hex = number.toString(16); console.log(hex);
  10. You have a few mistakes in your code. Missing an "o" on this line: #balloon{position:absolute; Capital S where it should be lowercase on this line: var timer=setInterval(moveIt, 1000); Missing an "r" on the line: clearInterval(timer); With that the code should work, but there's one mistake which the authors of the book made. They're assuming that the variable "balloon" will automatically point to the image. This currently works because of backwards compatibility, but shouldn't be relied on. You should always use DOM methods to access elements. var balloon = document.getElementById("balloon");
  11. If you start with the code from this page, you just need to add an extra line to the Javascript. modal.addEventListener("click", e => {if(e.currentTarget == e.target) e.currentTarget.style.display = "none" });
  12. Elements id attributes have to be unique. When you call getElementById() it gives you just one element, all the other ones are ignored. To affect multiple elements you need to use a function which can return a list of nodes, like querySelectorAll() or getElementsByClassName(), then you can loop through them and add event listeners to them. If you change your <img> tags from id="myImg" to class="myImg" then this code will listen for clicks on all of the images: var images = document.getElementsByClassName("myImg"); for(let i = 0; i < images.length; i++) { images[i].addEventListener("click", e => { document.getElementById("myModal").style.display = "block"; document.getElementById("img01").src = this.src; document.getElementById("caption").innerHTML = this.alt; }); }
  13. Every time you click on the div, it deletes what's inside the div and replaces it with an empty text field. Since the text field is inside the div, a click on the text field is also a click on the div, which makes the text field get deleted and replaced with another text field. If you put the click event on the <p> element instead the event listener will be gone when the <p> element gets removed. That's one possible solution, there are others, but what solution is best depends on what your end goal is with the whole page. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Changing the content of a div by clicking on it</title> <script> function div1_was_clicked() { document.getElementById("div1").innerHTML = '<input type="text">'; } </script> </head> <body> <div id="div1"> <p onclick="div1_was_clicked();">1 2 3</p> </div> <div id = "div2"> <input type="text"> </div> </body> </html>
  14. The syntax is wrong. You forgot the put a closing ">" on the <i> element and instead added two of them on the <img> element: <span> <i onclick="document.getElementById('S9id01').style.display='block'" <img src="VoteFraudPenaltySm.jpg">></i></span>
  15. No, there is no list of file types, you just have to manually type the extension in the filename itself.
  16. Notepad lets you choose an extension. When you select "Save As..", there's a dropdown at the bottom of the save window named "Save as type". If you select "All files (*.*)" you can set the extension to .html
  17. If you use MS Word, Wordpad or other rich text editors it won't work. It needs to be in plain notepad or a code editor. The file needs to be saved with a .html extension instead of .txt. Windows sometimes hides file extensions, so it is possible that your file is saved as ".html.txt" which wouldn't work.
  18. It's complicated. Here's an excerpt from the Python manual: https://docs.python.org/3/library/stdtypes.html#str.casefold If you want to add an element to a list, use the append() method. insert() is for when you want to insert an element at a specific position.
  19. You have to call the load() method at least once before you can access the properties. LoadConfig.load(); System.out.println(LoadConfig.BrowserType);
  20. If the HTML file is on your own computer you can put the PDF file in the same folder as the HTML file and then use the PDF's filename as its URL in your code.
  21. You can have the PDF document hosted in the same server as the web page.
  22. It looks like Google Drive has iframe protection. The page is not allowed to be opened inside a frame.
  23. The content of the modal goes inside the modal structure. There will need to be one of these structures for each different object you want to show in a modal, each with its own unique id. <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-teal"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span> <h2>Modal Header</h2> </header> <div class="w3-container"> IMAGES AND TEXT GO IN HERE </div> <footer class="w3-container w3-teal"> <p>Modal Footer</p> </footer> </div> </div>
  24. Here's a generic solution for closing any modal by clicking outside of it window.onclick = function(event) { if (event.target.classList.contains("w3-modal")) { event.target.style.display = "none"; } } If you have the "x" button in a modal, it should always close the modal when you click on it. Clicking outside a modal also can close the modal. Is this the behavior you're expecting? If not, let me know how you want it to behave. I'm not sure what you're referring to. Anything with an onclick attribute should be able to open a modal. You can have it embedded within a paragraph like this: <p>Click on <span onclick="document.getElementById('id01').style.display='block'">HERE</span> to open the modal.</p>
×
×
  • Create New...