Why is the word "undefined" appearing on top of my text?
function printName() {
document.write('My name is John Doe.');
}
function printAge() {
printName();
document.write('I am 47 years old.');
}
document.querySelector('.test').innerHTML = printAge();
function displayMyAge(){
myname();
document.write('I am 47 years old')
}
document.querySelector('.test').innerHTML=displayMyAge()
When displayMyAge() is called, it does not return anything. Therefore, the innerHTML for the selected target remains empty.
This lack of a return value is what causes it to show as Undefined.
When a web browser is processing an HTML document and encounters a script tag, it must execute that script before continuing to build the Document Object Model (DOM). If you try to access document.querySelector('.test') at that moment when it's not yet available, it will return undefined. Below is an example code where the script runs without any issues after the DOM has finished loading.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="test"></div>
</body>
<script>
function myname(){
document.write('I'm John Doe ')
}
function myage(){
myname();
document.write("I'm 47 years old")
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('.test').innerHTML=myage()
});
</script>
</html>export const getServerSideProps = async ({ params }) => { const res = await fetch( `https://pixabay.com/api/?key=${process.env.API_KEY}&id=${params.id}` ); const { hits } = await res.json(); if (!hits) { return { notFound: tr ...
I have created a form that dynamically increases whenever the user clicks on the add sale button Here is the HTML code: <fieldset data-ng-repeat="choice in choices"> <div class="form-group"> <label for="name"> Qu ...
Can you explain the difference between how to define the counterHandler function in these two examples? counterHandler = () => { this.setState(() => { return { times: this.state.times + 1 } }); } versus counterHandle ...
After implementing use client, I encountered the following error: Error: NextRouter was not mounted error. However, upon removing use client, a different error surfaced: Error when use client is removed: ReactServerComponentsError: A component requirin ...
I am currently facing an issue with my bubble chart series not plotting, even though I followed the HighCharts example tutorial. I am not seeing any errors on the browser console, which is making it challenging for me to troubleshoot. Here is the data I ...
My new service offers a solution for error pages in web apps by providing a code snippet that can be easily copied and pasted into the error page templates, similar to Google Analytics. The status code is embedded in a hidden input within the installatio ...
Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...
After users complete a quiz, they receive their results. The client now wants to implement a "Print Results" feature that opens in a new window with customized CSS. I'm trying to figure out how to transfer the results to the new window using JavaScri ...
I am facing an issue where I cannot retrieve the dynamic key pair value from the dynamic JSON. Below is my JSON: var d = { "pexels-photo.jpeg": { "information": "laptop", "desc": { "mimetype": "image/jpeg", "id" ...
My list displays words queried from a database, allowing me to click on a word to add it to another list that I can save. This functionality enables me to create multiple word lists. My goal is to visually distinguish the words in my query list that have a ...
When generating the URI, everything appears to be in order and the list data is displayed on the page. However, when sending the request in the request method, a 500 error occurs instead of the body being returned. Here is the URI: http://yufluyuinnepal.c ...
I am currently in the process of building my very first project from scratch. As I was setting everything up, I ran into an issue with using relative paths to reference my javascript file in my index.html file. Strangely enough, simply referencing the scri ...
Currently, I am utilizing C# and Selenium to browse through a website and have come across an issue regarding passing variables into my JavaScriptExecutor command. When I attempt to do so using the code below: ((IJavaScriptExecutor)webdriver).ExecuteScript ...
I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...
Currently on my page, I have a large plot created with jqplot along with a sidebar containing several smaller plots. I am trying to find a way to dynamically change the large plot based on which of the smaller plots the user clicks on, without needing to ...
Is there a way to monitor the load event of my images? Here's my current approach. export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => { const alt = useMemo(() => initial ...
I'm currently working on a regex method to validate decimals that only allow 2 numbers after the decimal point. For example, it should return true for 1.00 and false for 1.000, which it currently does. However, I also want it to return false for value ...
When retrieving a list of users from AWS Cognito, everything works flawlessly. However, the task of iterating over this array and removing users that do not match a specific Client ID is where I'm facing difficulties. What am I doing wrong in this sc ...
After creating a jQuery script to alter the CSS of a table row, I tested it on JSFiddle and it worked perfectly. However, when implemented into my web project, it doesn't seem to be functioning as intended. See the code below: HTML: <script src ...
Currently, I am embarking on a project that involves utilizing the AngularJS version of the SmartAdmin Bootstrap template foundhere. Within this project scope, I am required to integrate sparklines into various pages. I have successfully implemented them ...