Search the Community

Hi everyone, I have a file of html which contains code that fetches data from spotify api and renders it in iframes on the page. The issue is that on searching first time, it displays data in a very slow speed. Afterward that it works fine and fast. I need to make it search fast on the initial time also. fiverr.html

This JavaScript code below updates numbers from 0 to maximum target numbers that we can choose from a no code builder. We can also set different styles to these numbers, like the color. For example, I set the first number to 150 and its color to yellow. When the numbers are being updated, they are able to stop to the maximu numbers we chosed in the no code application. So, the first number reaches 150 and stops. However, the problem is when the updateCount() function starts and resets the numbers to 0, it clears all the styles set through the builder before. So, the numbers will start from 0 and will get a black color. I would like the numbers to be updated and keep their native styles. So, the first number will start from 0 with the color of yellow and stops when reaches 150. During all this update the styles should remain. How can I manage this? I was thinking of fetching the styles and add them to values, but I didn't find any solution? I used IA tools like Google Bard, but I didn't find any solution for 2 days now. Here is the code: <script> class Counter { constructor(id, target, speed, appendString) { this.id = id; this.target = target; this.speed = speed || 1000; this.counter = document.querySelector(`#${id}`); this.count = 0; this.appendString = appendString || ''; } updateCount() { if (this.count < this.target) { this.counter.innerText = `${this.count} ${this.appendString}`; this.count++; setTimeout(() => this.updateCount(), this.speed); } else { this.counter.innerText = `${this.target} ${this.appendString}`; } } } const ids = [ 'headline-e6423da8', 'headline-77ad9299', 'headline-8255ec52', 'headline-5e08a0cb' ]; const values = []; for (const id of ids) { const value = document.querySelector(`#${id}`).innerText; values.push(value); } const counters = [ new Counter('headline-e6423da8', values[0], 10, ''), new Counter('headline-77ad9299', values[1], 15, ''), new Counter('headline-8255ec52', values[2], 20, '%'), new Counter('headline-5e08a0cb', values[3], 25, '+') ]; window.addEventListener('scroll', () => { counters.forEach(counter => { if ( pageYOffset > counter.counter.offsetTop - counter.counter.offsetHeight - 500 && counter.activated === false ) { counter.counter.innerText = 0; counter.count = 0; counter.activated = true; counter.updateCount(); } else if ( pageYOffset < counter.counter.offsetTop - counter.counter.offsetHeight - 500 || (pageYOffset === 0 && counter.activated === true) ) { counter.counter.innerText = 0; counter.activated = false; } }); }); </script> Every number has an id. So, the 4 ids 'headline-e6423da8', 'headline-77ad9299', 'headline-8255ec52' and 'headline-5e08a0cb' belong to the 4 numbers. I was able to fectch and display the values of these ids. However, I can't display them with their styles.

$(".hideicon").click(function(){ //hide downtime var id = $(this).val(); var dt = id.split('|'); var sh = 'h'; toggle(dt[0], dt[1], sh); }); $(".showicon").click(function(){ //hide downtime var id = $(this).val(); var dt = id.split('|'); var sh = 's'; toggle(dt[0], dt[1], sh); }); $(".hidep2qrtr").click(function(){ // previous year quarter hideprev2qrtr() }); $(".hidepqrtr").click(function(){ // previous year quarter hideprevqrtr() }); $(".hideright").click(function(){ // previous year months hideprevyear() }); $(".hideitrgt").click(function(){ // itarget hideittarget(); }); $(".hide4week").click(function(){ // latest 4 weeks var l = $('#lweek').val(); var m = $('#lmnth').val(); hidecurrweek(l, m) }); }); function toggle(x, y, z){ var max = $('#subCt').val(); if(x == 'x'){ //show/hide all if(z == 's'){ var arry = $('.hideicon'); } else { var arry = $('.showicon'); } for(var i = 1; i < arry.length; i++){ var raw = $(arry[i]).val().substr(0, 2); //alert(raw); if(z == 'h'){ $('.'+raw+'1').hide(); // table row $('.showicon').show(); // show icons $('.hideicon').hide(); // hide icons $('#imgShow'+y).show(); // show all icon $('#imgHide'+y).hide(); // hide all icon $('#body').css("height", "auto"); $('#body').css("padding-bottom", "30px"); $('#footerDiv').css("bottom", "0%"); openSubCategory = 0; } else { $('.'+raw+'1').show(); $('.showicon').hide(); $('.hideicon').show(); $('#imgShow'+y).hide(); $('#imgHide'+y).show(); $('#body').css("height", "auto"); //alert('footer to bottom'); $('#body').css("padding-bottom", "30px"); $('#footerDiv').css("bottom", "-13%"); openSubCategory = max; } } } else { if($('.'+x+'1').is(':visible')){ //alert('close'); $('#imgHide'+y).hide(); $('#imgShow'+y).show(); $('.'+x+'1').hide(); openSubCategory--; if(openSubCategory != 0){ $('#imgShow0').show(); $('#imgHide0').show(); } if(openSubCategory == 0){ $('#imgHide0').hide(); } if(openSubCategory <= 7){ $('#footerDiv').css("bottom", "0%"); } } else { //alert('open'); $('#imgShow'+y).hide(); $('#imgHide'+y).show(); $('.'+x+'1').show(); openSubCategory++; if(openSubCategory != 0){ $('#imgShow0').show(); $('#imgHide0').show(); } if(openSubCategory == 0){ $('#imgShow0').hide(); } if(openSubCategory >= 8){ $('#footerDiv').css("bottom", "-13%"); } } } //alert('open sub count: '+openSubCategory); } These are the codes for the .click() and function toggle. In the pictures, first two pics are in IE11 and it's working perfectly. But in Edge or Chrome, the toggle button is not working anymore and causing error. May I know how can I fix this issue?

Hello, I would be very appreciative for any advice. I want to create a container on a Web page which inserts a clickable image to a variable URL, depending on the country the visitor is from. For example if a visitor is from China then the container imports a specific image with clickable URL from a repository of images and associated URLs. A random selection is fine, but for now I just want to get it working with a single clickable image. rhsnk you !

Hi! I would like to know if it is possible to convert the code that was wrote based on JavaScript to Java or Kotlin. What type of commands do I need to do, to make these changes? This one is part of a BootCamp´s exercises that I am engaged in. Below, the code and IDE´s print: for (i = 0; i < 3; i++) { let t = gets(); let v = gets(); let arrayV = v.split(" "); let maior = 0; let nivel = 0; maior = arrayV.reduce((a, b) => ( Math.max(a, b) )) if (maior < 10) { nivel = 1; } else if (maior < 20) { nivel = 2; } else { nivel = 3 } console.log(nivel) }

I have made a custom browser in Visual Studio with Visual Basic. The browser works great but does not run JavaScript so websites think I'm outdated. Does anyone know what I could do to let my browser run JS?

I want to make a RPG game that can be run in a browser. The goal of the post is to see if I can get other developers to help. I know HTML and CSS but don't know JavaScript, which is a big part of game. ( I am learning it now ) I want the graphics to look similar to pixel dungeon. The people who sign up will get equity of the game. While this game is to be made for fun it could also make money. For more details about the game details ( such as classes, levels, etc. ) contact me.

I've seen this (and similar) code used to apply an SVG filter to an image. How do I use this code to apply an SVG filter to a canvas? The canvas' content may change often. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="darkGreen"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> <image xlink:href="(url to image)" width="" height="" filter="url(#darkGreen)" /> </svg> Thank you

Hello.I started learning javascript and my professor give me this to solve. Its program that turn on and turn off bulbs on different ways. It have number of bulbs and number of variations . The problem is that i don't know how to use function deleteBulbs because when i type smaller number , those who left must get changed with blank.jpg but they won't. Please help me and sorry for my bad english. I uploaded images with problem. In first example, 3 are turned on . So in example 2,when i type 1 and 0, last bulb is turned off and other 2 must be blank but they are not in my case. <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <p> <b> Task: </b> There are <i> n </i> bulbs in the room, each of which is turned on by a separate switch. How many ways can a room be lit? </p> Number of bulbs: <input id = "numOfBulbs" type = "number"> </p> Number of variations<input id="numOfVariations" type="number"></p> <p> <button type="button" onclick="numOfVariations();">Light up </button> </p> <img id="image7" src="blank.jpg"> <img id="image6" src="blank.jpg"> <img id="image5" src="blank.jpg"> <img id="image4" src="blank.jpg"> <img id="image3" src="blank.jpg"> <img id="image2" src="blank.jpg"> <img id="image1" src="blank.jpg"> <img id="image0" src="blank.jpg"> <p id="solution"></p> <script> function numOfVariations() { var n, i, p=1,v,s; n=document.getElementById("numOfBulbs").value; if(n>8 || n<=0) { window.alert("Incorrect number of bulbs!"); var s=document.getElementById("image0").value; s.src="blank.jpg" ; s=document.getElementById("image2").value; s.src="blank.jpg"; s=document.getElementById("image3").value; s.src="blank.jpg"; s=document.getElementById("image4").value; s.src="blank.jpg"; s=document.getElementById("image5").value; s.src="blank.jpg"; s=document.getElementById("image6").value; s.src="blank.jpg"; s=document.getElementById("image7").value; s.src="blank.jpg"; document.getElementById("solution").innerHTML="Total variations: 0"; return; } v=document.getElementById("numOfVariations").value; for (i=1;i<=n;i++) p*=2; if((v<0) || (v>=p)){ window.alert("Incorrect number of variations!"); var s=document.getElementById("image0").value; s.src="blank.jpg" ; s=document.getElementById("image1").value; s.src="blank.jpg"; s=document.getElementById("image2").value; s.src="blank.jpg"; s=document.getElementById("image3").value; s.src="blank.jpg"; s=document.getElementById("image4").value; s.src="blank.jpg"; s=document.getElementById("image5").value; s.src="blank.jpg"; s=document.getElementById("image6").value; s.src="blank.jpg"; s=document.getElementById("image7").value; s.src="blank.jpg"; document.getElementById("solution").innerHTML="Total variations:"+ p; return; } document.getElementById("solution").innerHTML="Total variations:"+ p; p=1; for(i=0;i<n;i++){ if(v&p) turnOn(i); else turnOff(i); p*=2; } } function turnOff(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="off.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="off.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="off.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="off.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="off.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="off.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="off.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="off.jpg"; } } function turnOn(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="on.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="on.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="on.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="on.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="on.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="on.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="on.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="on.jpg"; } } function deleteBulbs(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="blank.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="blank.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="blank.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="blank.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="blank.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="blank.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="blank.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="blank.jpg"; } } </script> </body> </html> y are not. bulbs translated.rar

Hi there Is there anyone who can help a javascript Noob? And explain what is missing in my javascript code, so the pop-up only is displayed once per. session. Because right now, it pops up every time I click to a new page. And the idea is that it is should work like the business or consumer popup on dustin.com. Is my Javascrip code. <!--Modal--> <!--modalpopup Business eller privat--> <script> $(document).ready(function(){ //loads when document is ready if (document.cookie.indexOf('modal_shown=') >= 0) { //do nothing if modal_shown cookie is present } else { $('.modal').modal('show'); //show modal pop up document.cookie = 'modal_shown=seen'; //set cookie modal_shown //cookie will expire when browser is closed } }) </script> <script> $ts.ready(function() { $elm('[data-dismiss="modal"]').onclick = function() { $elm('.container').style.display = 'none'; } }); </script> <!--test--> <script> $ts.ready(function() { $elm('[data-dismiss="modal-footer"]').onclick = function() { $elm('.container').style.display = 'none'; } }); </script> <!---->

https://www.w3schools.com/howto/howto_custom_select.asp The link above is a custom select dropdown. I'm trying to get each item in the dropdown go to a link. I've tried using; <body> Please select city : <select name="select-city" onchange="location = this.value;"> <option value="">Select-City</option> <option value="https://en.wikipedia.org/wiki/New_Delhi">New Delhi</option> <option value="https://en.wikipedia.org/wiki/New_York">New York</option> <option value="https://en.wikipedia.org/wiki/Bern">Bern</option> <option value="https://en.wikipedia.org/wiki/Beijing">Beijing</option> </select> </body> And this, <select name="formal" onchange="javascript:handleSelect(this)"> <option value="home.com">Home</option> <option value="https://www.Facebook.com">Contact</option> </select> <script type="text/javascript"> function handleSelect(elm) { window.location = elm.value; } </script>

I'd like my video to start playing automatically when the page is launched without sound just like on this page: [LINK REMOVED]. I've tried any possible jQuery/javascript/CSS option I could find online but I always end up with Google error that's blocking the video from autoplay unless there was an interaction. How did they do it in the link above?

Hi all i need to duplicate a string using javascript problem is the string was taken from an xml node so, lots of things can go wrong. this is the string: <RunList Class="Parameter" Pages="0 ~ 3" Run="1" xmlns="http://www.CIP4.org/JDFschema_1_1"> <LayoutElement> <FileSpec URL="file://xxx/xxx/Jobs/xxx/xxx/xxx/xxx/xxx/xxx.pdf"></FileSpec> </LayoutElement> </RunList> any sugetions? thanks guy

Top javascript projects for bginners with source code We have lots of free basic to advanced level JavaScript projects here. Here you will learn JavaScript step by step. If you are a teacher, there is a very good way, that from on you can download or copy sample mini or advanced JavaScript projects and teach your students very well because every javascript project has very good examples. Each JavaScript project here is category-based, such as calculators, converters, online tools, games, Random scripts, and more. Each JavaScript project for beginners will be able to use and enhance their own programming skills.There are sample projects, javascript mini projects, basic javascript projects, advanced javascript projects, 100+, and more list of javascript projects. Step-by-step video tutorial on how to download a JavaScript project source code or file usage on your webpage.

I'm going through the HTML game module, and I found " var myleft = this.x; var myright = this.x + (this.width); var mytop = this.y; var mybottom = this.y + (this.height); " In https://www.w3schools.com/graphics/game_obstacles.asp Can someone please explain what points are myleft, myrightm mytop and mybottom on the component? I'm confused because aren't myleft and mytop the same point on the component? Please help. Thanks, Prakhar

I'm using the Autocomplete of w3schools, however the need to search for approximation arose Example If I type bar it returns me Barbados However, I need that in addition to returning Barbados he also returns me Antigua & Barbuda because here also contains the letters bar Is there any way to adapt this code to make it work like this?

I have copy and pasted the coding from https://www.w3schools.com/howto/howto_js_portfolio_filter.asp into my portfolio page and came across some issues that I cannot figure out. 1. When I open my html document in the web browser, it doesn't show all of the photos until you click on "All" in the portfolio's menu bar. It's supposed to show all right when you open the portfolio page. 2. The active link is not working right. It shows "All" as being active even when you click on the other options. Anyone know how to fix this? I am not familiar with js so I don't know how to fix these problems. art.css portfolio.js portfolio.html

Hello everyone, I have an issue where an external iFrame I am loading using Javascript displays fine on iOS, Android and Windows, but doesn't display on Mac Chrome, Firefox or Edge. Using Chrome Inspector, I can see the reason why it doesn't display is because height is set to 0px. If you resize the browser window, the iFrame then displays, as if Chrome is nudged into resizing the iFrame. My thinking is to force the iFrame's height, that way it will be displayed no matter what. I am fairly new to JS, so could someone recommend what that code might look like? Below is my code (a Shopify Buy Button): <div id='product-component-[product component]'></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '[product id]', node: document.getElementById('product-component-[product component]'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script> Below is the resulting iFrame rendered in browser: <iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe> Below is the full code as it's rendered in browser: <div class="collection-price-div"><div class="additionalprice w-embed w-script"><div id="product-component-1840729411716" class="shopify-buy-frame shopify-buy-frame--product shopify-buy__layout-vertical" style="max-width: 280px;"><iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '4840729411716', node: document.getElementById('product-component-1840729411716'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script></div></div> Many thanks

My friend and I are building a website and we're a little lost about how to get my form data (javascript) to transfer to him (python) so he can use it. I've just started learning front end (html, css, js) and he's pretty familiar with python. How do we connect the two? JSON? Nodejs?

My HTML page is having password input field when I try to input values to the password input field then the page becomes unresponsive after entering more than 30 to 40 characters. Below is the code which I am using. This issue I am having in all web browsers. Even if I change the minimum length and all other like lower, upper, number and symbol value to 50 then also the same problem persist. I am new to javascript, Kindly do the needful. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Style all input fields */ input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; } /* Style the submit button */ input[type=submit] { background-color: #4CAF50; color: white; } /* Style the container for inputs */ .container { background-color: #f1f1f1; padding: 20px; } /* The message box is shown when the user clicks on the password field */ #message { display:none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; } #message p { padding: 10px 35px; font-size: 18px; } /* Add a green text color and a checkmark when the requirements are right */ .valid { color: green; } .valid:before { position: relative; left: -35px; content: "✔"; } /* Add a red text color and an "x" when the requirements are wrong */ .invalid { color: red; } .invalid:before { position: relative; left: -35px; content: "✖"; } </style> </head> <body> <p>Try to submit the form.</p> <div class="container"> <form action="/action_page.php"> <label for="usrname">Username</label> <input type="text" id="usrname" name="usrname" required> <label for="psw">Password</label> <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required> <input type="submit" value="Submit"> </form> </div> <div id="message"> <h3>Password must contain the following:</h3> <p id="letter" class="invalid">199 <b>lowercase</b> letter</p> <p id="capital" class="invalid">199 <b>capital (uppercase)</b> letter</p> <p id="number" class="invalid">199 <b>number</b></p> <p id="length" class="invalid">Minimum <b>199 characters</b></p> </div> <script> var myInput = document.getElementById("psw"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var length = document.getElementById("length"); // When the user clicks on the password field, show the message box myInput.onfocus = function() { document.getElementById("message").style.display = "block"; } // When the user clicks outside of the password field, hide the message box myInput.onblur = function() { document.getElementById("message").style.display = "none"; } // When the user starts to type something inside the password field myInput.onkeyup = function() { // Validate lowercase letters var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g') if(myInput.value.match(lowerCaseLetters)) { letter.classList.remove("invalid"); letter.classList.add("valid"); } else { letter.classList.remove("valid"); letter.classList.add("invalid"); } // Validate capital letters var upperCaseLetters = new RegExp('(?:[A-Z].*){' + 199 + '}', 'g') if(myInput.value.match(upperCaseLetters)) { capital.classList.remove("invalid"); capital.classList.add("valid"); } else { capital.classList.remove("valid"); capital.classList.add("invalid"); } // Validate numbers var numbers = new RegExp('(?:[0-9].*){' + 199 + '}', 'g') if(myInput.value.match(numbers)) { number.classList.remove("invalid"); number.classList.add("valid"); } else { number.classList.remove("valid"); number.classList.add("invalid"); } // Validate length if(myInput.value.length >= 199) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.remove("valid"); length.classList.add("invalid"); } } </script> </body> </html>

The JavaScript Array Methods (Merging an Array with Values) example doesn't use array in it's example, it still uses an array like in the examples above it. The square brackets in the argument to concat should be removed, leaving 3 separate string arguments. I think example could be improved to something like: var arr1 = ["Cecilie", "Lone"]; var nephew = "Nick"; var myChildren = arr1.concat("Emil", "Tobias", "Linus", nephew);

First off, I am a newbie. I'm try to make the first accordion tab and heading tab open by default, but keep coming up short. Any and all help would be greatly appreciated! Sample url: https://www.iciwireless.com/industry-solutions-mat/construction.htm So, the "Two-way Radio" accordion and header tab should be open when entering the page. I'm using a DW template with repeatable regions to populate the accordions on a number of pages, which is working, but need the 1st accordion tab open. The last code that I tried was the following: <script> $(document).onload(function(){ $("#accordion1Collapse1").collapse('show'); }); }); </script> No luck there.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> <link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var id = 1; $("#butsend").click(function() { var newid = id++; $("#table1").append('<tr valign="top" id="'+newid+'">\n\ <td width="100px" >' + newid + '</td>\n\ <td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\ <td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\ <td width="100px" class="test_name'+newid+'">' + $("#test_name").val() + '</td>\n\ <td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\ <td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\ <td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\ <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>'); }); $("#table1").on('click', '.remCF', function() { $(this).parent().parent().remove(); $('#table1 tbody tr').each(function(id){ $($(this).find('td')[0]).html(id++); }); }); $("#butsave").click(function() { var lastRowId = $('#table1 tr:last').attr("id"); var test_code = new Array(); var test_name = new Array(); var generalprice = new Array(); var quantity = new Array(); var totalprices = new Array(); var patid = new Array(); for ( var i = 1; i <= lastRowId; i++) { patid.push($("#"+i+" .patid"+i).html()); test_code.push($("#"+i+" .test_code"+i).html()); test_name.push($("#"+i+" .test_name"+i).html()); generalprice.push($("#"+i+" .generalprice"+i).html()); quantity.push($("#"+i+" .quantity"+i).html()); totalprices.push($("#"+i+" .totalprices"+i).html()); totalprice.push($("#"+i+" .totalprice"+i).html()); } }); }); </script> <script> $(".qtol2,.qtol1").keyup(function() { $('.qtol3').val($('.qtol1').val() * $('.qtol2').val()); }); </script> </head> <body> <div class="form-group"> <form> <input name="patid" type="text" id="patid" placeholder="patid" value=""> <div class="container" id="multiple"> <input name="test_code" type="text" id="test_code" placeholder="code" value=""> <input name="test_name" type="text" id="test_name" placeholder="Item Name" value=""> <input class="qtol1" name="generalprice" type="text" id="generalprice" placeholder="general price"> <input class="qtol2" name="quantity" type="text" id="quantity" value="1" onClick="calc()" placeholder="quantity"> <input class="qtol3" name="totalprices" type="text" id="totalprices" placeholder="total prices"> <input name="send" type="button" id="butsend" class="add-row" value="Add Row"> </div> <div> <input name="save" type="button" class="btn btn-primary" value="Save to database" id="butsave"> </div> <table id="table1" name="table1" class="table table-bordered"> <tbody> <thead> <tr> <th>Serial no.</th> <th>ID</th> <th>Test code</th> <th>Test name</th> <th>General price</th> <th>Quantity</th> <th>Total prices</th> <th>Action</th> </tr> </thead> </tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>Total:</td> <td ><input id="subtotal" type="text"></td> <td> </td> </tr> </tfoot> </table> </form> </div> </body> </html>

unable to understand why black image is getting, please check the code and assist in generating the optimised image from file input <html> <head> <script src="jquery-3.4.1.min.js"></script> <title>Image Optimization</title> </head> <body> <div> <input type="file" id="imgFile" accept="image/*" capture="user"> </div> <div id ="test"> <img id="optImg" alt="optmisied Image"> </div> </body> </html> <script> $("#imgFile").change(function(){ const File = this.files[0]; const fileURL = URL.createObjectURL(File); const cvs = document.createElement("canvas"); let ctx = cvs.getContext("2d"); const imgFile = new Image(); imgFile.src = fileURL; imgFile.onload = function(){ ctx.drawImage(imgFile,0,0); } const cvsURL = cvs.toDataURL(File.type, 0.3); $("#optImg").attr('src',cvsURL).css('width',80) }); </script> please assist

Hello There, As I was going through your documentation of W3C for javascript. I would like to suggest one change in documentation. As per your Javascript documentation of https://www.w3schools.com/js/js_performance.asp (Reduce Activity in Loops) Bad code is as follows: var i; for (i = 0; i < arr.length; i++) { Better Code: var i; var l = arr.length; for (i = 0; i < l; i++) { But in URL (https://www.w3schools.com/js/js_htmldom_elements.asp) >> Finding HTML Elements by HTML Object Collections. In this example: var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements.value + "<br>"; } document.getElementById("demo").innerHTML = text; From above example the highlighted line should be replaced with Better code. Also after filling form for Report Error on page https://www.w3schools.com/js/js_htmldom_elements.asp and when i click on submit below API gives me error like API : https://www.w3schools.com/err_sup.asp "We cannot find the page you are looking for. It might have been removed, had its name changed, or is temporarily unavailable. Please check that the Web site address is spelled correctly." Please let me know, if I could help you here. Regards, Amol Rajhans