{"id":6839,"date":"2022-09-05T11:19:15","date_gmt":"2022-09-05T05:49:15","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/"},"modified":"2022-09-05T11:19:15","modified_gmt":"2022-09-05T05:49:15","slug":"solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/","title":{"rendered":"[Solved] *SOLVED* How to execute a function after a button is clicked? [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

When the interpreter runs the line .innerHTML=\"LIVES: \" + removeLives();<\/code>, removeLives<\/code> will be called, resulting in lives<\/code> being decremented and the new content there being lower.<\/p>\n

Put that line inside the click handler instead, and initially populate the lives<\/code> div via the HTML.<\/p>\n

Also, either use an inline handler in the HTML or .onclick<\/code> in the JS, but not both – preferably, avoid inline handlers, since they’re universally considered to be poor practice. To add the handler in the JS, make sure to use .onclick<\/code>, not .onClick<\/code>, it’s case sensitive.<\/p>\n

You’ll also probably want to stop decrementing once lives<\/code> reaches 0.<\/p>\n<\/p>\n

\n
\n
var lives = 3;\ndocument.getElementById(\"buttonA\").onclick = function() {\n  lives--;\n  if (lives < 0) lives = 0;\n  document.getElementById(\"lives\").innerHTML = \"LIVES: \" + lives;\n};<\/code><\/pre>\n
<div id=\"lives\">LIVES: 3<\/div>\n<button id=\"buttonA\">buttonA<\/button><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved *SOLVED* How to execute a function after a button is clicked? [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] When the interpreter runs the line .innerHTML=”LIVES: ” + removeLives();, removeLives will be called, resulting in lives being decremented and the new content there being lower. Put that line inside the click handler instead, and initially populate the lives div via the HTML. Also, either use an inline handler in the HTML or .onclick … 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":[954,1199,413,333,1017],"class_list":["post-6839","post","type-post","status-publish","format-standard","hentry","category-solved","tag-button","tag-click","tag-function","tag-javascript","tag-onclick"],"yoast_head":"\n[Solved] *SOLVED* How to execute a function after a button is clicked? [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-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] *SOLVED* How to execute a function after a button is clicked? [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] When the interpreter runs the line .innerHTML="LIVES: " + removeLives();, removeLives will be called, resulting in lives being decremented and the new content there being lower. Put that line inside the click handler instead, and initially populate the lives div via the HTML. Also, either use an inline handler in the HTML or .onclick ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-05T05:49:15+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] *SOLVED* How to execute a function after a button is clicked? [closed]\",\"datePublished\":\"2022-09-05T05:49:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/\"},\"wordCount\":120,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"button\",\"click\",\"function\",\"javascript\",\"onclick\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/\",\"name\":\"[Solved] *SOLVED* How to execute a function after a button is clicked? [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-09-05T05:49:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] *SOLVED* How to execute a function after a button is clicked? [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\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] *SOLVED* How to execute a function after a button is clicked? [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-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] *SOLVED* How to execute a function after a button is clicked? [closed] - JassWeb","og_description":"[ad_1] When the interpreter runs the line .innerHTML=\"LIVES: \" + removeLives();, removeLives will be called, resulting in lives being decremented and the new content there being lower. Put that line inside the click handler instead, and initially populate the lives div via the HTML. Also, either use an inline handler in the HTML or .onclick ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-05T05:49:15+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] *SOLVED* How to execute a function after a button is clicked? [closed]","datePublished":"2022-09-05T05:49:15+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/"},"wordCount":120,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["button","click","function","javascript","onclick"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/","name":"[Solved] *SOLVED* How to execute a function after a button is clicked? [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-05T05:49:15+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-solved-how-to-execute-a-function-after-a-button-is-clicked-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] *SOLVED* How to execute a function after a button is clicked? [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\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","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\/6839","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=6839"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/6839\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=6839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=6839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=6839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}