JMRKER
-
Content Count
157 -
Joined
-
Last visited
-
Days Won
5
-
You can also preceed the string with a + to convert it to a number. For example: <script> function mytab1(byyr,bymo) { var x = byyr, y = x + 1; // expect 201 z = +x +1; // expect 21 alert(y+' : '+z); var a = bymo * 10; // expect 50 alert(a); } mytab1('20','5'); // test </script>
-
See if you can modify this to your needs... <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Multi-Modals</title> <!-- <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- // optional --> <!-- From: http://w3schools.invisionzone.com/topic/55976-multiple-modal-boxes-on-webpage/ For: https://w3schools.invisionzone.com/topic/61800-html-or-js-problem/ --> <style> /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>Modal Examples</h2> <!-- Trigger/Open The Modal --> <button class="myBtn_multi">Open Modal</button> <button class="myBtn_multi">Open Modal2</button> <button class="myBtn_multi">Open Third Modal</button> <!-- The Modal --> <div class="modal modal_multi"> <!-- Modal content --> <div class="modal-content"> <span class="close close_multi">×</span> <p>Some text in the Modal..</p> </div> </div> <!-- The Modal2 --> <div class="modal modal_multi"> <!-- Modal2 content --> <div class="modal-content"> <span class="close close_multi">×</span> <p>Some text in the Modal..2</p> </div> </div> <!-- The Modal3 --> <div class="modal modal_multi"> <!-- Modal3 content --> <div class="modal-content"> <span class="close close_multi">×</span> <p>Some text in the third Modal..3</p> </div> </div> <script> // Get the modal elements var modalparent = document.getElementsByClassName("modal_multi"); // Get the button that opens the modals var modal_btn_multi = document.getElementsByClassName("myBtn_multi"); // Get the <span> element that closes the modals var span_close_multi = document.getElementsByClassName("close_multi"); // When the user clicks the button, open the modal function setDataIndex() { for (i = 0; i < modal_btn_multi.length; i++) { modal_btn_multi[i].setAttribute('data-index', i); modalparent[i].setAttribute('data-index', i); span_close_multi[i].setAttribute('data-index', i); } } for (i = 0; i < modal_btn_multi.length; i++) { modal_btn_multi[i].onclick = function() { var ElementIndex = this.getAttribute('data-index'); modalparent[ElementIndex].style.display = "block"; }; // When the user clicks on <span> (x), close the modal span_close_multi[i].onclick = function() { var ElementIndex = this.getAttribute('data-index'); modalparent[ElementIndex].style.display = "none"; }; } window.onload = function() { setDataIndex(); }; window.onclick = function(event) { if (event.target === modalparent[event.target.getAttribute('data-index')]) { modalparent[event.target.getAttribute('data-index')].style.display = "none"; } }; </script> </body> </html> BTW, welcome to the forums.
-
Don't know if this is what the OP wants. His definitions are somewhat sparse. Example code lets people see their selections only. Would need to add logic for correctness. The display could be printed out (Ctrl-P) and submitted for evaluation to OP without a server, but I'm with you, not recommended without some additional code. But it is definitely short for a beginner example.
-
Welcome to the forums. What you want to do is possible, but the devil is in the details. What have you attempted to this point? How many questions? Multiple choice or true/false? Is this for a real grade or just a practice display for the user. Sound what you are looking for is a "quiz". There are a ton of examples on the web. Search with google using "javascript quiz" as a start. Modify for your needs. Just for grins, this is the simplest response form I could come up with: <!DOCTYPE html><html lang="en"><head> <title> VERY Simple Quiz </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> ul { list-style-type: none; cursor: pointer; } dt { font-size: 1.1em; font-weight: bold; padding-left: 3em; } dd { margin-bottom: 2em; } </style> </head><body> <h1>Very Simple Quiz</h1> <!-- form onsubmit="return false" // for testing purposes only --> <dl> <dt>1. What is today?</dt> <dd> <ul> <li><label><input type="radio" name="q1" value='Q1:Sun'>Sunday</input></label></li> <li><label><input type="radio" name="q1" value='Q1:Sat'>Saturday</input></label></li> <li><label><input type="radio" name="q1" value='Q1:None'>None of the above</input></label></li> </ul> </dd> <dt>2. Is today part of a weekend?</dt> <dd> <ul> <li><label><input type="radio" name="q2" value='Q2:Yes'>Yes</input></label></li> <li><label><input type="radio" name="q2" value='Q2:No'>No</input></label></li> </ul> </dd> </dl> <p> <button id="checkAns">Responses in console.log</button> </p> <!-- /form // for testing only --> <pre id='demo'>Your Responses </pre> <script> console.clear(); function checkAnswers() { let sel = document.querySelectorAll('input[type="radio"]'); for (let i=0; i<sel.length; i++) { if (sel[i].checked) { // answers in console: #'s start a zero console.log(i,sel[i].value); document.getElementById('demo').innerHTML += `${i} : ${sel[i].value}<br>`; } } } function init() { document.getElementById('checkAns').addEventListener('click', checkAnswers); } init(); </script> </body></html>
-
I am unclear as to what you are trying to do with your project so I am just making a guess as to what you are trying to accomplish with your initial post. Therefore just use my post below for information if it of no use to your project. Note that I do not use any ID references except for the new button selection. Also, I opened your Logo for display. If you do not intend it to be displayed then don't include it in the program instead of setting the height and width of the image to be 1px. Normally the 'onload' is not included in the image display. It could have been put into the <body> element, but I chose to put it in the JS initialization section along with the button event logic. <!DOCTYPE html><html lang="en"><head><title> Test Page </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- Modified from: https://w3schools.invisionzone.com/topic/61788-only-changes-the-first-element/ --> <style> hr { border: 2px solid red; } .hide { display: none; } </style> </head><body> <p> <img src="https://wecarepro.be/img/cms/PharmaBelgium-Belmedis_Logo2.png" title='Logo' width="200" height="100" /> </p> <p class="price">€5.99</p> <p class="cost">€3.02</p></p> <hr> <p class="price">€14.50</p> <p class="cost">€7.90</p></p> <hr> <button id="btnHide"> Cost Displays </button> <script> console.clear(); function CheckApoPriceDisplay() { let p = document.getElementsByClassName("price"); for (let el of p) { el.style.color = "Darkgreen"; el.style.fontWeight = "Bold"; } let c = document.getElementsByClassName("cost"); for (let el of c) { el.style.color = "Darkred"; el.style.fontWeight = "Bold"; } } function HideCosts() { let c = document.getElementsByClassName("cost"); for (let el of c) { el.classList.toggle('hide'); } } function init() { CheckApoPriceDisplay(); document.getElementById('btnHide').addEventListener( 'click', HideCosts ); } init(); </script> </body></html> Hopefully this helps with your understanding if it is not of benefit to your project. Good Luck!
-
Using your analogy, the 'ambassador' is not part of the security force (police) and should not be named as part of security. And if there is more than one 'ambassador', who is to respond when the 'ambassador' is paged? If both the 'ambassador' and the 'security force' are involved, then they should be classified as 'authority'. If both are to be notified or contacted at the same time, don't use ID as the target as all SHOULD have UNIQUE names. Instead look into the use of 'class' if you need to determine who is collectively in 'authority'. Note: Your project should contain appropriately named elements suitable for the project. In this case not ambassasor, police or authority When grouping different IDs for identification consider using a 'class' to be able to collect the representatives.
-
What kind of problems are you having? What have you tried so far? Whose examples are you following? Link? What are the folders supposed to contain? HTML and CSS code? BTW, welcome to the forums.
-
Ctrl-A is a defined event by the browser. Similar to using Ctrl-X and Ctrl-V to cut-and-paste. I don't think your "myFunction(e)" is checking either keypress as written.
-
You have at least two <div> tags with id="apoPrice". That's like going on to an airport and calling to your friend, "Hi Jack". Who's going to respond? Your friend, another passenger or the TSA agent named "Jack" with a gun? Change references to id="apoPrice1", id="apoPrice2" as needed so that only unique id values are used in your program. Note also that your "else" condition will never be reached with your logic. It will ALWAYS find the first element when looking for "getElementsByClassName('price')[0] so it cannot return false for the 'else' statement to be executed.
-
Without seeing the HTML, CSS and JS working together, the following is just a SWAG at your problem. What makes me suspect is your statement: "The script is supposed to change all elements with ID "apoPrice" if one element of class "price" is avaible. " ID values must be unique, so when you say "all elements with ID...", it may be where things must be changed. Hope this helps resolve your problem. BTW, welcome to the forums.
-
Also look at your '=' key logic where you check for the previous '+' or '-' key entry. I don't think you want to CHECK for the status of the key with this: if (sign='+'){ Other thoughts: 1. What kind of calculator does not let you enter a zero? 2. And why do you need to use parseFloat() when you have not ability to enter a decimal?
-
How OLD is that script you found? <script> no longer requires the language='JavaScript' addition. Notice that you clear out the 'results.value' and change the 'firstNumber' value as soon as you press '+' or '-' Then when you press the '=' key, the blank value is added to the newest entry. You may want to re-think your logic here. BTW, welcome to the forums.
-
increase the size of radio buttons and checkboxes
JMRKER replied to crazyswede's topic in JavaScript
OK. Just tried in Chrome and it does change size of display. I had initially tested with FF and there is no change to display size. (Using version 78.0.2) Unclear as to why the difference. Untested with other browsers. -
increase the size of radio buttons and checkboxes
JMRKER replied to crazyswede's topic in JavaScript
@ishan_shah The class name should be the same: Either 'checkbox' or 'chexkbox'. @dsonesuk What should be happening here. Neither one changes the display size. -
You have so many DIVs, so the question becomes: Which 2 DIVs are you trying to place side-by-side. Difficult to tell from your zipped code. Then the question becomes: Why are you doing it that way? It would be much easier to use a Flexbox or Grid layout which can be made responsive very easily with CSS media settings.
