{"id":226095,"date":"2024-04-18T09:56:50","date_gmt":"2024-04-18T09:56:50","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=226095"},"modified":"2024-04-18T09:56:50","modified_gmt":"2024-04-18T09:56:50","slug":"how-do-i-get-return-value-from-javascript-to-html-2","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/","title":{"rendered":"How do I get return value from JavaScript to HTML?"},"content":{"rendered":"<p>When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document. Fortunately, there are several methods you can use to achieve this. Let&#8217;s explore some of these methods below.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#1_How_do_I_get_return_value_from_JavaScript_to_HTML\" title=\"1. How do I get return value from JavaScript to HTML?\">1. How do I get return value from JavaScript to HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#2_How_can_I_pass_a_value_from_a_JavaScript_function_to_an_HTML_input_field\" title=\"2. How can I pass a value from a JavaScript function to an HTML input field?\">2. How can I pass a value from a JavaScript function to an HTML input field?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#3_Can_I_pass_a_value_from_JavaScript_to_HTML_using_innerHTML\" title=\"3. Can I pass a value from JavaScript to HTML using innerHTML?\">3. Can I pass a value from JavaScript to HTML using innerHTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#4_How_can_I_use_JavaScript_to_populate_a_dropdownselect_element\" title=\"4. How can I use JavaScript to populate a dropdown\/select element?\">4. How can I use JavaScript to populate a dropdown\/select element?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#5_How_can_I_update_the_content_of_multiple_HTML_elements_using_JavaScript\" title=\"5. How can I update the content of multiple HTML elements using JavaScript?\">5. How can I update the content of multiple HTML elements using JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#6_How_can_I_retrieve_values_from_JavaScript_and_display_them_in_HTML_tables\" title=\"6. How can I retrieve values from JavaScript and display them in HTML tables?\">6. How can I retrieve values from JavaScript and display them in HTML tables?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#7_How_can_I_use_JavaScript_to_display_an_error_message_in_HTML\" title=\"7. How can I use JavaScript to display an error message in HTML?\">7. How can I use JavaScript to display an error message in HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#8_How_can_I_update_the_HTML_content_after_an_async_JavaScript_function_completes\" title=\"8. How can I update the HTML content after an async JavaScript function completes?\">8. How can I update the HTML content after an async JavaScript function completes?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#9_How_can_I_show_a_loading_spinner_while_waiting_for_JavaScript_to_update_HTML_content\" title=\"9. How can I show a loading spinner while waiting for JavaScript to update HTML content?\">9. How can I show a loading spinner while waiting for JavaScript to update HTML content?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#10_How_can_I_get_a_return_value_from_a_JavaScript_function_executed_by_an_event\" title=\"10. How can I get a return value from a JavaScript function executed by an event?\">10. How can I get a return value from a JavaScript function executed by an event?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#11_Can_I_get_a_return_value_from_an_asynchronous_JavaScript_function_to_HTML\" title=\"11. Can I get a return value from an asynchronous JavaScript function to HTML?\">11. Can I get a return value from an asynchronous JavaScript function to HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#12_How_can_I_access_JavaScript_global_variables_in_HTML\" title=\"12. How can I access JavaScript global variables in HTML?\">12. How can I access JavaScript global variables in HTML?<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"1_How_do_I_get_return_value_from_JavaScript_to_HTML\"><\/span>1. How do I get return value from JavaScript to HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p><strong>The most common way to get a return value from JavaScript to HTML is by manipulating the content of HTML elements using JavaScript. You can assign the value directly to an HTML element using its ID or by accessing it through the DOM (Document Object Model).<\/strong><\/p>\n<p>Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<p id=\"result\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function getResult() {<br \/>\n        return \"Hello, world!\";<br \/>\n    }<\/p>\n<p>    document.getElementById(\"result\").textContent = getResult();<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the JavaScript function `getResult()` returns the string &#8220;Hello, world!&#8221; which is then assigned to the content of the HTML paragraph element with the ID &#8220;result&#8221;. As a result, the text &#8220;Hello, world!&#8221; will be displayed on the page.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_How_can_I_pass_a_value_from_a_JavaScript_function_to_an_HTML_input_field\"><\/span>2. How can I pass a value from a JavaScript function to an HTML input field?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can set the value of an HTML input field by accessing its `value` property using JavaScript. For example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><br \/>\n<input type=\"text\" id=\"myInput\"><\/p>\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function getValue() {<br \/>\n        return \"Hello, world!\";<br \/>\n    }<\/p>\n<p>    document.getElementById(\"myInput\").value = getValue();<br \/>\n<\/script><br \/>\n&#8220;`<br \/>\nIn this case, the JavaScript function `getValue()` returns the string &#8220;Hello, world!&#8221; which is then assigned to the value property of the HTML input field with the ID &#8220;myInput&#8221;. The input field will now display &#8220;Hello, world!&#8221; as its value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Can_I_pass_a_value_from_JavaScript_to_HTML_using_innerHTML\"><\/span>3. Can I pass a value from JavaScript to HTML using innerHTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>Yes, you can use the `innerHTML` property of an HTML element to set its content with JavaScript. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<p id=\"myElement\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function getContent() {<br \/>\n        return \"<strong>Hello, world!<\/strong>\";<br \/>\n    }<\/p>\n<p>    document.getElementById(\"myElement\").innerHTML = getContent();<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the JavaScript function `getContent()` returns the HTML string &#8220;<strong>Hello, world!<\/strong>&#8220;. The `innerHTML` property of the HTML paragraph element with the ID &#8220;myElement&#8221; is then set with this value. As a result, the content of the paragraph element will be &#8220;Hello, world!&#8221; and it will be displayed in bold.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_How_can_I_use_JavaScript_to_populate_a_dropdownselect_element\"><\/span>4. How can I use JavaScript to populate a dropdown\/select element?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can dynamically populate a dropdown\/select element using JavaScript by manipulating its `options` property. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><br \/>\n<select id=\"mySelect\"><\/select><\/p>\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function populateOptions() {<br \/>\n        var values = [\"Option 1\", \"Option 2\", \"Option 3\"];<br \/>\n        var select = document.getElementById(\"mySelect\");<\/p>\n<p>        for (var i = 0; i < values.length; i++) {<br \/>\n            var option = document.createElement(\"option\");<br \/>\n            option.text = values[i];<br \/>\n            option.value = i + 1;<br \/>\n            select.add(option);<br \/>\n        }<br \/>\n    }<\/p>\n<p>    populateOptions();<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the JavaScript function `populateOptions()` creates three options dynamically based on the `values` array. The `createElement()` method is used to create each option, and then the `text` and `value` properties are set accordingly. Finally, the options are added to the select element using the `add()` method. When the script is executed, the select element will be populated with &#8220;Option 1&#8221;, &#8220;Option 2&#8221;, and &#8220;Option 3&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_How_can_I_update_the_content_of_multiple_HTML_elements_using_JavaScript\"><\/span>5. How can I update the content of multiple HTML elements using JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can update the content of multiple HTML elements by assigning the return value from your JavaScript function to multiple elements. For example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<p class=\"content\">\n<p><\/p>\n<p class=\"content\">\n<p><\/p>\n<p class=\"content\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function getContent() {<br \/>\n        return \"This is some content.\";<br \/>\n    }<\/p>\n<p>    var elements = document.getElementsByClassName(\"content\");<\/p>\n<p>    for (var i = 0; i < elements.length; i++) {<br \/>\n        elements[i].textContent = getContent();<br \/>\n    }<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the JavaScript function `getContent()` returns the string &#8220;This is some content.&#8221;. The `getElementsByClassName()` method is used to select all elements with the class &#8220;content&#8221;. Then, with a loop, the content of each element is updated with the return value. As a result, all three paragraph elements with the class &#8220;content&#8221; will display the same text.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_How_can_I_retrieve_values_from_JavaScript_and_display_them_in_HTML_tables\"><\/span>6. How can I retrieve values from JavaScript and display them in HTML tables?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can retrieve values from JavaScript and display them in HTML tables by accessing the table using JavaScript and then manipulating its content. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<table id=\"myTable\"><\/p>\n<thead><\/p>\n<tr><\/p>\n<th>Name<\/th>\n<p><\/p>\n<th>Age<\/th>\n<p>\n        <\/tr>\n<p>\n    <\/thead>\n<p><\/p>\n<tbody><\/tbody>\n<p>\n<\/table>\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function getPeople() {<br \/>\n        return [<br \/>\n            { name: \"John\", age: 25 },<br \/>\n            { name: \"Emma\", age: 30 },<br \/>\n            { name: \"Michael\", age: 35 }<br \/>\n        ];<br \/>\n    }<\/p>\n<p>    var tableBody = document.getElementById(\"myTable\").getElementsByTagName(\"tbody\")[0];<br \/>\n    var people = getPeople();<\/p>\n<p>    for (var i = 0; i < people.length; i++) {<br \/>\n        var row = tableBody.insertRow(i);<br \/>\n        var cell1 = row.insertCell(0);<br \/>\n        var cell2 = row.insertCell(1);<br \/>\n        cell1.innerHTML = people[i].name;<br \/>\n        cell2.innerHTML = people[i].age;<br \/>\n    }<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the JavaScript function `getPeople()` returns an array with three objects representing people and their ages. The `getElementById()` and `getElementsByTagName()` methods are used to select the table and its tbody element. Then, with a loop, new rows and cells are dynamically created using the `insertRow()` and `insertCell()` methods, and their content is populated with the values from the JavaScript array. As a result, the table will display the names and ages of each person.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_How_can_I_use_JavaScript_to_display_an_error_message_in_HTML\"><\/span>7. How can I use JavaScript to display an error message in HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can display an error message in HTML using JavaScript by manipulating an HTML element that is designated to display the error message. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<p id=\"errorMessage\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function showError() {<br \/>\n        var error = \"An error occurred. Please try again later.\";<br \/>\n        var errorMessage = document.getElementById(\"errorMessage\");<br \/>\n        errorMessage.textContent = error;<br \/>\n    }<\/p>\n<p>    showError();<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the JavaScript function `showError()` sets the `error` variable with a custom error message. The `getElementById()` method is used to select the HTML paragraph element designated to display error messages. Finally, the error message content is updated with the value of the `error` variable. As a result, the paragraph element will display the error message.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_How_can_I_update_the_HTML_content_after_an_async_JavaScript_function_completes\"><\/span>8. How can I update the HTML content after an async JavaScript function completes?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can update HTML content after an async JavaScript function completes by using promises or async\/await. Here&#8217;s an example using async\/await:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<p id=\"result\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    async function retrieveData() {<br \/>\n        return new Promise(resolve => {<br \/>\n            setTimeout(() => resolve(\"Data retrieved!\"), 2000);<br \/>\n        });<br \/>\n    }<\/p>\n<p>    async function updateContent() {<br \/>\n        const data = await retrieveData();<br \/>\n        document.getElementById(\"result\").textContent = data;<br \/>\n    }<\/p>\n<p>    updateContent();<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the `retrieveData()` function returns a promise that resolves after a 2-second delay. The `updateContent()` function uses `await` to wait for the promise to resolve before assigning the retrieved data to the HTML element&#8217;s content. The `updateContent()` function is then invoked, and after the promise resolves, the content of the HTML element will be updated to &#8220;Data retrieved!&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_How_can_I_show_a_loading_spinner_while_waiting_for_JavaScript_to_update_HTML_content\"><\/span>9. How can I show a loading spinner while waiting for JavaScript to update HTML content?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can show a loading spinner by using CSS to display a spinner element initially, and then hiding it after the JavaScript has updated the HTML content. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<div id=\"loadingSpinner\" class=\"spinner\"><\/div>\n<p><\/p>\n<p id=\"result\" class=\"hidden\">\n<p><!-- CSS --><\/p>\n<style>\n  .spinner {<br \/>\n    \/* Styles to display a spinner *\/<br \/>\n  }<\/p>\n<p>  .hidden {<br \/>\n    display: none;<br \/>\n  }<br \/>\n<\/style>\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function retrieveData() {<br \/>\n        return new Promise(resolve => {<br \/>\n            setTimeout(() => resolve(\"Data retrieved!\"), 2000);<br \/>\n        });<br \/>\n    }<\/p>\n<p>    async function updateContent() {<br \/>\n        document.getElementById(\"loadingSpinner\").classList.remove(\"hidden\");<br \/>\n        document.getElementById(\"result\").classList.add(\"hidden\");<\/p>\n<p>        const data = await retrieveData();<\/p>\n<p>        document.getElementById(\"loadingSpinner\").classList.add(\"hidden\");<br \/>\n        document.getElementById(\"result\").classList.remove(\"hidden\"); <br \/>\n        document.getElementById(\"result\").textContent = data;<br \/>\n    }<\/p>\n<p>    updateContent();<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, initially, the `loadingSpinner` element is displayed with the spinner CSS styles, while the `result` element is hidden with the `hidden` class. When the `updateContent()` function is called, the spinner is displayed and the `result` element stays hidden until the promise resolves. After that, the `loadingSpinner` element is hidden, and the `result` element is displayed with the retrieved data.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10_How_can_I_get_a_return_value_from_a_JavaScript_function_executed_by_an_event\"><\/span>10. How can I get a return value from a JavaScript function executed by an event?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>When executing a JavaScript function with an event, you can use the value returned by the function as needed. For example, if you have a button with a click event, you can access the return value of the function in the event listener. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><br \/>\n<button id=\"myButton\">Click me<\/button><\/p>\n<p id=\"result\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    function processData() {<br \/>\n        return \"Data processed!\";<br \/>\n    }<\/p>\n<p>    document.getElementById(\"myButton\").addEventListener(\"click\", function() {<br \/>\n        var result = processData();<br \/>\n        document.getElementById(\"result\").textContent = result;<br \/>\n    });<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this case, when the button is clicked, the `processData()` function is executed, returning the string &#8220;Data processed!&#8221;. The value of `result` is then assigned to the `result` element&#8217;s content, and it will now display &#8220;Data processed!&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"11_Can_I_get_a_return_value_from_an_asynchronous_JavaScript_function_to_HTML\"><\/span>11. Can I get a return value from an asynchronous JavaScript function to HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>Yes, you can get a return value from an asynchronous JavaScript function to HTML by using promises and async\/await. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<p id=\"result\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    async function fetchData() {<br \/>\n        return new Promise(resolve => {<br \/>\n            setTimeout(() => resolve(\"Data fetched!\"), 2000);<br \/>\n        });<br \/>\n    }<\/p>\n<p>    async function updateContent() {<br \/>\n        const data = await fetchData();<br \/>\n        document.getElementById(\"result\").textContent = data;<br \/>\n    }<\/p>\n<p>    updateContent();<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the `fetchData()` function returns a promise that resolves after a 2-second delay with the string &#8220;Data fetched!&#8221;. The `updateContent()` function uses `await` to wait for the promise to resolve before assigning the fetched data to the HTML element&#8217;s content. The `updateContent()` function is then invoked, and after the promise resolves, the content of the HTML element will be updated to &#8220;Data fetched!&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"12_How_can_I_access_JavaScript_global_variables_in_HTML\"><\/span>12. How can I access JavaScript global variables in HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>JavaScript global variables can be accessed in HTML by referencing them through JavaScript. Here&#8217;s an example:<\/p>\n<p>&#8220;`html<br \/>\n<!-- HTML --><\/p>\n<p id=\"result\">\n<p><!-- JavaScript --><br \/>\n<script><br \/>\n    var greeting = \"Hello, world!\";<\/p>\n<p>    document.getElementById(\"result\").textContent = greeting;<br \/>\n<\/script><br \/>\n&#8220;`<\/p>\n<p>In this example, the global variable `greeting` holds the string &#8220;Hello, world!&#8221;. The `getElementById()` method is then used to access the HTML element with the &#8220;result&#8221; ID, and the value of `greeting` is assigned to its content. As a result, the paragraph element will display &#8220;Hello, world!&#8221; on the page.<\/p>\n<p>These are just a few methods to get return values from JavaScript to HTML. Depending on your use case, you may choose different approaches, such as using frameworks like React or Vue.js, or implementing more complex solutions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document. Fortunately, there are several methods you can use to achieve this. Let&#8217;s explore some of these methods below. 1. How do I get return value from JavaScript to HTML? &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How do I get return value from JavaScript to HTML?\" class=\"read-more button\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#more-226095\">Read more<span class=\"screen-reader-text\">How do I get return value from JavaScript to HTML?<\/span><\/a><\/p>\n","protected":false},"author":57,"featured_media":107420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86279],"tags":[],"class_list":["post-226095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn","no-featured-image-padding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How do I get return value from JavaScript to HTML?<\/title>\n<meta name=\"description\" content=\"When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do I get return value from JavaScript to HTML?\" \/>\n<meta property=\"og:description\" content=\"When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/synchronyfinancial\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-18T09:56:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Casey Mayer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@synchrony\" \/>\n<meta name=\"twitter:site\" content=\"@synchrony\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Casey Mayer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/\"},\"author\":{\"name\":\"Casey Mayer\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f\"},\"headline\":\"How do I get return value from JavaScript to HTML?\",\"datePublished\":\"2024-04-18T09:56:50+00:00\",\"dateModified\":\"2024-04-18T09:56:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/\"},\"wordCount\":1236,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"articleSection\":[\"Learn\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/\",\"name\":\"How do I get return value from JavaScript to HTML?\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\"},\"datePublished\":\"2024-04-18T09:56:50+00:00\",\"dateModified\":\"2024-04-18T09:56:50+00:00\",\"description\":\"When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document.\",\"breadcrumb\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/namso-gen.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How do I get return value from JavaScript to HTML?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"description\":\"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co\",\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/namso-gen.co\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"contentUrl\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"width\":500,\"height\":164,\"caption\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\"},\"image\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/synchronyfinancial\",\"https:\/\/twitter.com\/synchrony\",\"https:\/\/www.youtube.com\/synchronyfinancial\",\"https:\/\/www.instagram.com\/synchrony\",\"https:\/\/www.linkedin.com\/company\/synchrony-financial\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f\",\"name\":\"Casey Mayer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Casey Mayer\"},\"description\":\"Guest author Casey Mayer has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do I get return value from JavaScript to HTML?","description":"When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document.","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:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/","og_locale":"en_US","og_type":"article","og_title":"How do I get return value from JavaScript to HTML?","og_description":"When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document.","og_url":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/","og_site_name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","article_publisher":"https:\/\/www.facebook.com\/synchronyfinancial","article_published_time":"2024-04-18T09:56:50+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png","type":"image\/png"}],"author":"Casey Mayer","twitter_card":"summary_large_image","twitter_creator":"@synchrony","twitter_site":"@synchrony","twitter_misc":{"Written by":"Casey Mayer","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#article","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/"},"author":{"name":"Casey Mayer","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f"},"headline":"How do I get return value from JavaScript to HTML?","datePublished":"2024-04-18T09:56:50+00:00","dateModified":"2024-04-18T09:56:50+00:00","mainEntityOfPage":{"@id":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/"},"wordCount":1236,"commentCount":0,"publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"articleSection":["Learn"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/","url":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/","name":"How do I get return value from JavaScript to HTML?","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/#website"},"datePublished":"2024-04-18T09:56:50+00:00","dateModified":"2024-04-18T09:56:50+00:00","description":"When working with JavaScript and HTML, you often encounter situations where you need to pass a value from your JavaScript code back to your HTML document.","breadcrumb":{"@id":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/namso-gen.co\/blog\/how-do-i-get-return-value-from-javascript-to-html-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/namso-gen.co\/blog\/"},{"@type":"ListItem","position":2,"name":"How do I get return value from JavaScript to HTML?"}]},{"@type":"WebSite","@id":"https:\/\/namso-gen.co\/blog\/#website","url":"https:\/\/namso-gen.co\/blog\/","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","description":"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co","publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/namso-gen.co\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/namso-gen.co\/blog\/#organization","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","url":"https:\/\/namso-gen.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","contentUrl":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","width":500,"height":164,"caption":"Namso Gen Blog - Free Credit Card Generator [100% Valid]"},"image":{"@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/synchronyfinancial","https:\/\/twitter.com\/synchrony","https:\/\/www.youtube.com\/synchronyfinancial","https:\/\/www.instagram.com\/synchrony","https:\/\/www.linkedin.com\/company\/synchrony-financial"]},{"@type":"Person","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f","name":"Casey Mayer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Casey Mayer"},"description":"Guest author Casey Mayer has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here."}]}},"_links":{"self":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/226095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/comments?post=226095"}],"version-history":[{"count":0,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/226095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media\/107420"}],"wp:attachment":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media?parent=226095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/categories?post=226095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/tags?post=226095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}