Search the Community
Showing results for tags 'javascript'.
-
I have a use case where my content editable div accepts only string inside it but it shows the html elements as they are supposed to be shown on website but as per the configurations mentioned in package. They have mentioned the attributes but not click events. Now, if I have string as `some text here <button onclick=someFunction()>button</button>`. Here someFunction is directly being called without triggering button because I think it is in string. How can I call `someFunction()` only when button is clicked.
-
On the tutorial for an image gallery slideshow (https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp) the example starts with the first image enlarged. The code they provided doesn't apply that to my website, I have to select an image to enlarge it, is there something I can add? Thanks
-
This code gives an error that x[m] is undefined when it calls show(i) but it works fine if I call like show(0). What happens? I already declare x and m then why it gives an error? My code... <html> <head> <style> .myslides{margin: 0px;} </style> </head> <body> <div class="myslides"></div> <div class="myslides"></div> </body> <script> var x = document.getElementsByClassName("myslides"); var i = -1; function show(m) { x[m].style.display = "block"; } function hide(n) { x[n].style.display = "none"; } while(i<x.length) { i = i+1; show(i); setTimeout(hide(i), 3000); if(i==x.length){i = -1;} } </script> </html>
-
MOTIVATION: It is sometimes said that time heals all. With this in mind I am hoping that the W3Schools community has advanced since the last time that I communicated and has found a solution to the following problem. BACKGROUND: Recently I created a new webpage that can be found at www.publiustwo.com/ali. If you open this page in an iPhone with a vary narrow viewport such as my own, you will observe that filling in any of the form items that require text input, and in several cases even those that do not, causes the width of the document to increase beyond the size of the available viewport and does not return it to its former size after the input has been completed. QUESTION: It would appear that there are two solutions to this problem: one, prevent the size of the page from expanding in the first place; two, cause the size of the page to retract after the entry has been completed. Has anyone found a solution to this problem" Roddy
-
I create a modal box that when the user clicks on the button the modal will appear with animation. When the user clicks on the close button ( located on the right side of the header area ) or anywhere of the screen except modal box it will disappear without animation. I want that the modal will disappear/hide with animation. I create two CSS animation. One is animatetop which I already used when modal will open and another is animatedown which I want to use when modal will disappear. But, I can't understand how to do that? See the code on JSFiddle <html> <head> <style> .background{ display:none; position: fixed; z-index: 1; height: 100%; left: 0; top: 0; width: 100%; padding: 100px; background-color: rgba(0,0,0,0.4); } .modal{ background-color: white; position: relative; border: 1px solid #888; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s; width: 80%; } .header{ width: 100%; padding: 8px 20px; background-color: crimson; color: white; } .footer{ width: 100%; padding: 8px 20px; background-color: lime; color: white; } .middle{ width: 100%; padding: 2px 20px; background-color: white; color: black; } h2{ margin: 0px; } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatedown { from {top:0; opacity:1} to {top:-300px; opacity:0} } span{ float: right; color: white; font-size: 28px; font-weight: bold; cursor: pointer; padding: 2px 5px; } </style> </head> <body> <button onclick="modal()">Open Modal</button> <div class="background" id="MyModal"> <div class="modal" id="modal"> <div class="header"> <span onClick="a()">×</span> <h2>Header</h2> </div> <div class="middle"> <h1>Modal</h1><br> <h1>Popup Box</h1> </div> <div class="footer"> <h2>Footer</h2> </div> </div> </div> </body> <script> background = document.getElementById("MyModal"); function modal() { document.getElementById("MyModal").style.display = "block"; } function a() { document.getElementById("MyModal").style.display = "none"; } window.onclick = function (event) { if(event.target == background) { document.getElementById("MyModal").style.display = "none"; } } </script> </html>
-
Hi Everyone, I'm trying in a bootstrap view to replace two dropdown lists (yes/no) by two toggle checkboxes. Here is the part of code used on the Edit View : <div class="row"> <div class="col-md-3" style=""> <div class="col-sm-12"> <label for="d_c" class="col-sm-12 control-label">DC</label> </div> </div> <div class="col-md-3" style="" > <div class="col-sm-12"> <label for="i_m_c" class="col-sm-12 control-label">IMC</label> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_1" id="test_1" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_2" id="test_2" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> </div> When i check the test_1, 'on' is stored in my (sql) database, when i check test_2, 'on' is also stored. my problem is that i would like to be able to have test_2 toggle button visible only when test_1 toggle button is checked, and when test_1 is not checked to store 'NULL' as test_2 value. And when test_2 is checked to force test_1 value to be 'on', and force test_2 value to 'NULL' if test_1 is not checked. ALL that I tried in javascript ended in a failure, so if there is anybody who can tell me how to get out of it, any help will be really appreciated. (i have try following javascript (div names have been removed from code above as nothing worked as i want to)) <script type="text/javascript"> function Change() { if ((document.getElementById('test_1').checked)) { document.getElementById('madiv').style.display="block"; document.getElementById('madiv2').style.display="block"; } else { document.getElementById('madiv').style.display="none"; document.getElementById('madiv2').style.display="none"; } } </script> And if anybody can tell me how to get the checkbox value on another bootstrap form (Modify View)... i'tried with value="<?php echo...; ?>" but it doesn't worked.. a big big thanks in advance. (sorry for my poor english) Have a nice day. Jeff
-
I have an intersection observer for one animation, but i want to use window.requestIdleCallback() Where I should add the code window.requestIdleCallback(callback_1)? my script: if (document.querySelector('#weddings')) { let observer_1; let Element_1; let prevRatio = 0.0; let options = { root: null, rootMargin: "0px", threshold: buildThresholdList() }; // Set things up Element_1 = document.querySelector("#img-1"); initObserver(); ////////////////////////////////////////////////////////////////////////////// function initObserver() { observer_1 = new IntersectionObserver(callback_1, options); observer_1.observe(Element_1); } ///////////////////////////////////////////////////////////////////////////// function buildThresholdList() {...} ///////////////////////////////////////////////////////////////////////////// var gallerySroll_1 = anime({...}); //////////////////////////////////////////////////////////////////////////// function callback_1 (entries, observer_1) { entries.forEach((entry) => { if(entry.boundingClientRect.top <= 0 && entry.intersectionRatio != prevRatio){ gallerySroll_1.seek(gallerySroll_1.duration * (entry.intersectionRatio)); }else{ gallerySroll_1.seek(1000); } prevRatio = entry.intersectionRatio; }); } } if I add the code at the start after the if before anything i got the error: TypeError: entries.forEach is not a function callback_1 https://alessiopaolettidesign.it/ph/js/main.js:343 -
I am pretty new to javascript and node.js. I am wanting to display some text using document.getElementById('txt').innerHTML= "some text" followed by a node module : var spawn = require('child_process').spawnSync; child = spawn('ffmpeg',['-y -i ',some_file , result_file ], { shell: true }); (which takes some time) and then document.getElementById('txt').innerHTML= "some other text"; However it only disp[ays the second lot of text after the external program has finished. I had assumed that as I am using the synchronous version of spawn that the first line would get displayed first, how can I do this? Thanks
-
I followed the following tutorial and I was finally able to add a slide in menu on my WordPress site. However, I noticed that the body scrolls when moving up and down on my mobile phone. Can someone explain to me how I can disable body scroll when the menu is opened? Many thanks in advance! Tutorial: https://www.w3schools.com/howto/howto_js_sidenav.asp <script> function openNav() { document.getElementById("mySidenav").style.width = "100%"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script>
-
Hi, I've used this code in my website. I want "Hide --> Show", but the explenation automatic do "Show --> Hide". Is there a way to flip the code?
-
I have this script and would like to make it search if just the word Mango is in the array and if it is true console.log the index of it. <!DOCTYPE html> <html> <body> <h1>Array includes()</h1> <p>Check if the fruit array contains "Mango":</p> <p id="demo"></p> <p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p> <script> var fruits = ["Banana is yellow", "Orange juice", "Apple is red", "Mango is orange"]; var n = fruits.includes("Mango"); console.log(n); </script> </body> </html>
-
Is it possible to use this lightbox code with multiple galleries? At the moment, when using it with different galleries, lightbox will pop up, but it only show first gallery, and the others won't display. I have implemented this lightbox code with my PHP code and for the first gallery, everything is fine, but when I click others, only those gallery thumbnails will show up, but the currentSlide isn't and I understand that code changes only in the first gallery. My code: <div class="row"> <div class="row-inner" id="ajax-posts"> <?php while( $refs->have_posts() ): $refs->the_post(); // get_template_part('content/content', 'reference'); $galleryarray = get_post_gallery_ids($post->ID); ?> <div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>"> <a> <div class="bg_img cursor"<?php if ( $thumbnail_id = get_post_thumbnail_id() ) { if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) ) printf( ' style="background-image: url(%s);"', $image_src[0] ); } ?> onclick="openModal(<?php echo $i; ?>);currentSlide(<?php echo $id ?>)"> </div> <h3><?php the_title(); ?></h3> <p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p> </a> </div> <!-- Modal --> <div id="myModal-<?php echo $i; ?>" class="modal"> <span class="close cursor" onclick="closeModal(<?php echo $i; ?>)">×</span> <div class="modal-content"> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $number = $index+1; ?> <div id="img-<?php echo $id; ?>" class="mySlides"> <div class="numbertext"><?php echo $number; ?> / <?php echo count($galleryarray); ?></div> <img id="<?php echo $id; ?>" src="<?php echo $image[0]; ?>" style="width:100%"> </div> <?php } ?> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $alt = get_post_meta( $id, '_wp_attachment_image_alt', true); $number = $index+1; ?> <div class="column"> <img id="<?php echo $id; ?>" class="demo cursor" src="<?php echo $image[0]; ?>" style="width:100%" onclick="currentSlide(<?php echo $number ?>)" alt="<?php echo $alt; ?>"> </div> <?php } ?> </div> </div> <?php $i++; endwhile; ?> </div> </div> function openModal(i) { document.getElementById('myModal-'+i).style.display = "block"; document.getElementById('pageHeader').style.zIndex = "0"; document.getElementById('pageFooter').style.zIndex = "0"; document.getElementById('pageContainer').style.textAlign = "left"; } function closeModal(i) { document.getElementById('myModal-'+i).style.display = "none"; document.getElementById('pageHeader').style.zIndex = "10"; document.getElementById('pageFooter').style.zIndex = "9"; document.getElementById('pageContainer').style.textAlign = "center"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length;} console.log(slideIndex); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } Is it possible to change that code somehow to get it working, or maybe better solution is to sum up every gallery array to one, and make one Modal, where those galleries pop up only when clicking on the right gallery?
-
$(function() { $("#demo").keyup(function(){ var len = $("#demo").val(); if(len.length>8){ var el = $("<p></p>").html(""); $("#holder").append(el); //$("p").addClass("alert alert-warning"); var x = $("<span></span>").html(" Too long"); $("p").append(x); $("span").addClass("glyphicon glyphicon-alert"); stop(); } else if(len.length<=8){ $("#holder p").children().remove(); } }); });
-
jsonLikeObj.getFoo.value( ); BACKGROUND: Consider the following object var jsonLikeObj = Object.create( {}, {getFoo: { value: function() { return this.foo = 1; }, enumerable: false } } ); DISCUSSION: Now I could more easily understand the following that does not work, than what does work. What Does Not Work jsonLikeObj.getFoo.value(); What Does Work jsonLikeObj.getFoo(); QUESTION: What is going on? Roddy -
I have 3 fields that are the same name as corresponding column in MySQL database. First field is a dynamic dropdown list called "eventname". Second field called "eventdate" is an input field that gets populated via choice made from "eventname" dropdown list / First field. Third field called "venuename" is an input field that gets populated via choice made from "eventname" dropdown list / First field. What this dynamic dropdown list does is select the eventname from database then there is an onchange function that pulls out corresponding data from same line for the eventdate and venuename and sets them in the corresponding input field. All works as they should and data gets entered to the MySQL database. Only one issue: "eventname" choice from dropdown list should be submitted as "eventname" the displayed choice, what happens is my code enters data in MySQL as "eventdate | venuename" and my desired result should only be "eventname" The PHP <select id="eventname" onchange="eventFunction(eventname)"> <option selected="selected"></option> <?php foreach ($event as $event) { ?> <option value="<?php echo $event['eventdate'] .'|'. $event['venuename']?>"><?php echo $event['eventname'] ?></option> <?php } ?> </select> Date: <input id="eventdate"> Venue: <input id="venuename"> and the JavaScript <script> function eventFunction(eventname){ var eventDetails = eventname.options[eventname.selectedIndex].value.split("|"); document.getElementById("eventdate").value=eventDetails[0]; document.getElementById("venuename").value=eventDetails[1]; } </script> NOTE: If I touch the value attribute ie value="<?php echo $event['eventdate'] .'|'. $event['venuename']?>" the javascript wont work. I am a begginer with coding using JavaScript, can someone help me solve this please with examples. Thanx.
-
I need to get the raw window handle for a html / javascript window (hwnd in windows 10), using javascript / node.js / nwjs but can't find a way. does anybody have any ideas? I want to embed mpv or mplayer in a window using the -wid option which requires the window handle as an integer. Or does anyone have any ideas how to do this as an alternative? Thanks
-
Hello All, I have a question in regards to an idea I have and was curious as to which of the JavaScript tutorials would be a good place to start. What I had in mind was an image that would swap through a series of pictures, say for example of 10. I would like these images to swap over over in one of four directions randomly, image 2 would say for example slide image 1 from the top, image 3 would slide from the left, etc. Which of the JavaScript Tutorials here would be a good place to start for this idea? I am aware of the setInterval() command to switch between images after x amount of milliseconds, I just am not sure how to properly function a randomizer for the direction of the swap as well as the amount of images.
-
I like the automatic slideshow in the example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto, but would like 2 slideshows on one page. When I try to do this myself, one slideshow plays and finishes, then the other one starts and finishes. I would like them to start at the same time and loop and like the caption option but don't necessarily need the "dots".
-
Hello! I'm looking for some help with my Javascript code. I have a services page with 5 tabs. I used w3schools to obtain and tweak this code as needed. However, I need to link to a specific tab from my home page and I'm having trouble editing the Javascript to make this possible. Here's what I have thus far: Services Page HTML: <div class="col"> <button class="tablinks" onclick="openCity(event, 'nonclinical')"><div class="tab-wrap-blue"><div class="nonclinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Nonclinical Development</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'clinical')"><div class="tab-wrap-green"> <div class="clinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Clinical Development</h4></div> </div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'safety')"><div class="tab-wrap-dkgreen"><div class="safety" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Regulatory, Safety and Manufacturing</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'life')"><div class="tab-wrap-gray"><div class="life" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Life Science Enterprises</h4></div></div></button> </div> Current Javascript: <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); }); </script> Home page link needs to go to both the services page, and open up a specific <button>. Ie. <button class="tablinks" onclick="openCity(event, 'clinical')"> I'm new to Javascript and W3Schools has been such a help! Hoping there is a simple solution from someone who knows this code well. Thanks so much!
-
BACKGROUND: I recently install nodejs and npm and downloaded a library call xregexp.js Then, I discovered what I did not know. The applications nodejs (node) and npm are primarily designed for server-side Javascript. Now, I am confused. In PHP one can simply include or require PHP from another document file and employ it wherever you like that PHP can be used. When I try to do something similar with xregexp.js I inevitably fail and am told that the script cannot be found. Now, I have node and npm installed above my domain folders so that it can be used with all of my domains. Simply I do not know how to access the modules that I install with npm, and I was hoping to install several more. QUESTION: How does one access node modules that are installed with npm, but reside above the domain folders in which the Javascript that is targeted to employ them resides? Roddy
-
QUESTION: Is the following an accurate statement? If not, please clarify how a unicode string literal differs from say, an ASCII string literal. Roddy Untitled-1.html
-
I copied the game code from w3 schools for a school project, however I wanted to change the turning and moving object from a red square to an image. Now everything works fine but the image does not turn when the object turns, how do I fix this. Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } </style> </head> <body onload="startGame()"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "images/smiley.png", 255, 255, "image"); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 500; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0; this.interval = setInterval(updateGameArea, 10); window.addEventListener('keydown', function (e) { e.preventDefault(); myGameArea.keys = (myGameArea.keys || []); myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) window.addEventListener('keyup', function (e) { myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) }, stop : function() { clearInterval(this.interval); }, clear : function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y, type) { this.type = type; if (type == "image") { this.image = new Image(); this.image.src = color; } this.width = width; this.height = height; this.speed = 0; this.angle = 0; this.moveAngle = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; if (type == "image") { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); } else { ctx.fillStyle = color; ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height); } ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); ctx.restore(); } this.newPos = function() { this.angle += this.moveAngle * Math.PI / 180; this.x += this.speed * Math.sin(this.angle); this.y -= this.speed * Math.cos(this.angle); } } function updateGameArea() { myGameArea.clear(); myGamePiece.moveAngle = 0; myGamePiece.speed = 0; if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -2; } if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 2; } if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 2; } if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -2; } myGamePiece.newPos(); myGamePiece.update(); } </script> <p></p> </body> </html> I very appreciate the help!
-
Hello, I am using the How to Create Tabs tutorial (https://www.w3schools.com/howto/howto_js_tabs.asp), but I can't get the default tab to work. It seems to work in the Tryit Editor, but even pasting the code as is, it doesn't work. I am using Shopify and have a .js, .css, and a .liquid (page template) document. Other changes on the pages seem to take affect. {{ 'tabs.js' | asset_url | script_tag }} {{ 'tabs.css' | asset_url | stylesheet_tag }} {% include 'breadcrumb' %} <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="grid"> <div class="grid-item large--two-thirds push--large--one-sixth"> <h1>{{ page.title }}</h1> <div class="rte"> <h2>Tabs</h2> <p>Click on the x button in the top right corner to close the current tab:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">×</span> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">×</span> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">×</span> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> {{ page.content }} </div> </div> </div> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } /* Style the close button */ .topright { float: right; cursor: pointer; font-size: 28px; } .topright:hover {color: red;}
-
I'm trying to create a form that allows for calculation of metabolic rate. There is an if,then statement related to gender (formula changes if female vs male) I'd also like the result to be targeted to a specific part of the page (anchor). Ideally a new section can appear (maybe need to link a new page?) to provide further details Below is my code, any help would be so appreciated!! <head> <style> body { font: 15px gothic, sans-serif; letter-spacing: 1px; } input { width: 100%; } input[type=number] { border: none; border-bottom: 1px solid grey; } input[type=button], input[type=submit], input[type=reset] { background-color: #ddcecb; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #95483e; padding: 16px 32px; text-decoration: none; letter-spacing: 1px; margin: 4px 2px; #submit:hover { border: none; background: #d2d1d1; box-shadow: 0px 0px 1px #777; }} input[type=text]:focus { border: 1px solid #555; } .form-inline label { margin: 5px 10px 5px 0; } @media (max-width: 800px) { .form-inline input { margin: 10px 0; } .form-inline { flex-direction: column; align-items: stretch; } </style> </head> <form name="RMRcalc"> weight (kg) : <input type="number" name="weight" autofocus><br><br> height (cm): <input type="number" name="height"> <br><br> age (years): <input type="number" name="age"> <br><br> activity Level: <select name="activity" margin=5px > <option value="1.2">sedentary (1-2x/week)</option> <option value="1.3">low (2-3x/week)</option> <option value="1.4">moderate (3-4x/week)</option> <option value="1.6">high (5+x/week)</option> </select> <br><br> female <input type="radio" name="gender" value="female" checked> <br> male <input type="radio" name="gender" value="male"> <br> <input type="submit" value="Calculate" id="calculate" onclick="RMRCalc ()" target="results"> <br><br> <script type="text/javascript"> "use strict" function RMRCalc () { var weight = document.getElementById ("weight").value; var height = document.getElementById("height").value; var age = document.getElementById("age").value; var activity = document.getElementById("activity").value; if (gender="female") var RMR = (10*weight) + (6.25*height) - (5*age) -161; document.getElementById("RMR").innerHTML=RMR; else var RMR = (10*weight) + (6.25*height) - (5*age) +5; document.getElementById("RMR").innerHTML=RMR; } </script> </form> <p><a name="results"> Your Daily Caloric Requirements: <div id ="RMR"></div> </a></p> <br> <p> Did you know that Thank you!!
-
Hello. Any one here as experience with ionic 4 and express? I'm trying to do something simple: A simple login form for the user to enter login and password and a connect button. Once the user click on connect to send the data to the server. I wanna see the data on the server side maybe using an alert. Can anyone help me with that? It's been a couple of days I'm trying it. Please notice that I'm not trying something complex and the goal is to understand the concept, therefore the use of error handling, or whatever other utility to make the connection strong isn't necessary at all. Thanks ahead of time.
