{"id":18217,"date":"2022-10-30T01:23:04","date_gmt":"2022-10-29T19:53:04","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/"},"modified":"2022-10-30T01:23:04","modified_gmt":"2022-10-29T19:53:04","slug":"solved-not-getting-correct-javascript-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/","title":{"rendered":"[Solved] Not getting correct javascript [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-49053119\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"49053119\" data-parentid=\"49052869\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>So the mistake you&#8217;re making is that if you loop through several things and hardcode the id, several elements get the same id, which is why your increase() function is updating the &#8220;wrong&#8221; elements.<\/p>\n<p>So you need to give each item in the loop a unique id. One way is to append an id from the resultSet to the id of the HTML element.<\/p>\n<pre><code>&lt;div class=\"col-md-6 pull-right\"&gt;\n    &lt;button type=\"button\" class=\"btn btn-primary btn-box-tool pull-right\" onclick=\"increase()\"&gt;\n        &lt;i class=\"fa fa-plus\"&gt;&lt;\/i&gt;\n    &lt;\/button&gt;\n    &lt;div class=\"col-xs-3 pull-right\"&gt;\n        &lt;input type=\"text\" id=\"quantity&lt;%= resultSet.id %&gt;\" class=\"form-control input-sm\" value=\"&lt;%= resultSet.getInt(3) %&gt;\" onchange=\"increase('quantity&lt;%= resultSet.id %&gt;', 'price&lt;%= resultSet.id %&gt;', 'baseprice&lt;%= resultSet.id %&gt;')\"&gt;\n    &lt;\/div&gt;\n    &lt;button type=\"button\" class=\"btn btn-primary btn-box-tool pull-right\"&gt;\n        &lt;i class=\"fa fa-minus\"&gt;&lt;\/i&gt;\n    &lt;\/button&gt;\n    &lt;br&gt;\n    &lt;br&gt;\n    &lt;div class=\"input-group pull-right col-sm-3\"&gt;\n        &lt;span class=\"input-group-addon\"&gt;\n            &lt;i class=\"fa fa-rupee\"&gt;&lt;\/i&gt;\n        &lt;\/span&gt;\n        &lt;input type=\"hidden\" id=\"baseprice&lt;%= resultSet.id %&gt;\" value=\"&lt;%= resultSet.getInt(3) %&gt;\"&gt;\n        &lt;input type=\"text\" id=\"price&lt;%= resultSet.id %&gt;\" class=\"form-control\" value=\"&lt;%= resultSet.getInt(3) %&gt;\"  disabled&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>The onchange should fire when the quantity is changed, and the function now receives a pair of specific fields that have unique ids. The function then just needs to do the math and make the updates.<\/p>\n<pre><code>&lt;script type=\"text\/javascript\"&gt;\n    function increase(qelement, pelement, bpelement){\n        document.getElementById(qelement).value += 1;\n        var dishQuantity = document.getElementById(qelement).value;\n\n        var basePrice = document.getElementById(bpelement).value;\n        document.getElementById(pelement).value *= dishQuantity;\n    }\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>That just increments the value of the quantity field, and multiplies the base price by the new quantity.<\/p>\n<p>This is not a copy\/paste solution. There may be some JavaScript issues since I so often use jQuery. This is just a rough mockup of one way to achieve what you&#8217;re attempting. There are more elegant ways, but this is probably the quickest to get something working. Once it is, you should use this as an opportunity to learn more about how JavaScript interacts with the DOM, and possibly even eventListeners.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">10<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Not getting correct javascript [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] So the mistake you&#8217;re making is that if you loop through several things and hardcode the id, several elements get the same id, which is why your increase() function is updating the &#8220;wrong&#8221; elements. So you need to give each item in the loop a unique id. One way is to append an id &#8230; <a title=\"[Solved] Not getting correct javascript [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\" aria-label=\"More on [Solved] Not getting correct javascript [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333],"class_list":["post-18217","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Not getting correct javascript [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Not getting correct javascript [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] So the mistake you&#8217;re making is that if you loop through several things and hardcode the id, several elements get the same id, which is why your increase() function is updating the &#8220;wrong&#8221; elements. So you need to give each item in the loop a unique id. One way is to append an id ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-29T19:53:04+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Not getting correct javascript [closed]\",\"datePublished\":\"2022-10-29T19:53:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\"},\"wordCount\":206,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\",\"name\":\"[Solved] Not getting correct javascript [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-29T19:53:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Not getting correct javascript [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Not getting correct javascript [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Not getting correct javascript [closed] - JassWeb","og_description":"[ad_1] So the mistake you&#8217;re making is that if you loop through several things and hardcode the id, several elements get the same id, which is why your increase() function is updating the &#8220;wrong&#8221; elements. So you need to give each item in the loop a unique id. One way is to append an id ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/","og_site_name":"JassWeb","article_published_time":"2022-10-29T19:53:04+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Not getting correct javascript [closed]","datePublished":"2022-10-29T19:53:04+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/"},"wordCount":206,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/","name":"[Solved] Not getting correct javascript [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-29T19:53:04+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-not-getting-correct-javascript-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Not getting correct javascript [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=18217"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18217\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=18217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=18217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=18217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}