Simple Javascript Question (help pulling a value from a div)

I am new to learning javascript. I am trying to create a program that takes an input of a user’s age and converts it from years to months, weeks, days, minutes, and seconds and then outputs the result to a div. I think I am almost there but whenever I input a number on the form and run the code the function I created does not grab the value. My code is saved on a codepen note HERE
Any help would be greatly appreciated. I am just learning so I know my code will not be perfect.

Welcome, Baby_Yoda.

Some things to help you get going:

  1. This line has a syntax error:
<input type="number" placeholder="Age" id="ageY"
  1. In general, the name attribute is used with inputs as a way of interacting with data. Just some trivia, not necessary for your application
  2. console.log(ageYears);, here ageYears is a function, it is not the variable you have defined in the function.
  3. There is no need to have a function for each value. With your use case, I would only have 1 function. Perhaps a structure like this:
// Use window.onload to setup eventListener

// Define function that grabs the value of the input,
// and returns! an array of all the calculated values for the age.

Also, have a read about Scope

Hope this helps

1 Like

thank you for the fast response. It sounds like my original code was more correct then. My original JS looked like the following

window.onload = function() {
    document.getElementById("number-submit").addEventListener("click", displayResult);
}

let ageYears = document.getElementById("ageY").value;
let ageMonths = ageYears * 12;
let ageWeeks = ageMonths * 4;
let ageDays = ageWeeks * 7;
let ageMinutes = ageDays * 1440;
let ageSeconds = ageMinutes * 60;



function displayResult() {
  console.log(ageYears);
}

I reverted it back to this and believe I fixed the syntax error by adding a close tag to the HTML code > but when I run the code and log ageYears it now returns a null value. :frowning:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

1 Like

Think about what needs to happen for everything to work:

  • Once the document has mounted on the window(window.onload), an eventListener needs to be added to the submit button.
  • This eventListener needs to listen for clicks, and, once clicked, needs to invoke a function that performs the following:
    • Input (age) value is grabbed
    • Using this value, a bunch of variables are calculated
    • returns the wanted values / sets the values to the innerHTML of another element.

Currently, your script is grabbing the ageYears value, immediately after the script (not the function) is called.

Hope this helps

Okay I rewrote everything based on the info I got here and in an effort to try to break down the code into steps. It landed me with a longer code that now submits to an error page. this might be in part due to codepen but I am not sure. Here is the codepen link again https://codepen.io/amotor/pen/JjYxWWm

let ageMonths = 0; let ageWeeks = 0; let ageDays = 0; let ageMinutes = 0; let ageSeconds = 0;

//function to convert years into months
function yearToMonths(months) {
ageMonths = ageYears * 12;
return ageMonths;
}

//function that converts years into weeks
function yearToWeeks(weeks) {
ageWeeks = ageYears * 52;
return ageWeeks;
}

//function that converts years into days
function yearToDays(days) {
ageDays = ageYears * 365;
return ageDays;
}

//function that converts years into hours
function yearToHours(hours) {
ageHours = ageYears * 8760;
return ageHours;
}

//function that converts years into minutes
function yearToMinutes(minutes) {
ageMinutes = ageYears * 525600;
return ageMinutes;
}

//function that converts years into seconds
function yearToSeconds(seconds) {
ageSeconds = ageYears * 31536000;
return ageMinutes;
}
//add event Listener to prevent code from running automatically
conversion.addEventListener(“submit”, function(event){
event.preventDefault();

//get the value of years as entered by the user
let ageYears = document.GetElementById(“Input”).value;

//Call the functions and store them in their respective variables
ageMonths = yearToMonths(months);
ageWeeks = yearToWeeks(weeks);
ageDays = yearToDays(days);
ageHours = yearToHours(hours);
ageMinutes = yearToMinutes(minutes);
ageSeconds = yeartoSeconds(seconds);

let result = document.getElementById(“result”);


//Display result in HTML element called “result”
result.innerHTML =

You are ${ageYears} years old.
You are ${ageMonths} months old.
You are ${ageWeeks} old.
You are ${ageHours} old.
You are ${ageMinutes} old.
You are ${ageSeconds} old.

;
}, false);

Hey, you are getting there, but I would encourage you to go through some of the JavaScript content in the curriculum here on fCC. There are some fundamentals missing in your code.

Specifically, I really suggest you only have 1 function that returns all of the variables. Also, you are calling all of the functions with arguments that are undefined, and not using the parameter in the functions.

Good luck, and happy coding.

1 Like

Thanks for all the help. I took a break for a few hours and just came back to the code and got it to work as expected. I had a lot of mistakes that I should have easily caught but I think I was just overthinking it. Here is the corrected and updated code.

let ageMonths = 0;
let ageWeeks = 0;
let ageDays = 0;
let ageMinutes = 0;
let ageSeconds = 0;

//function to convert years into months
function yearToMonths(ageYears) {
ageMonths = ageYears * 12;
return ageMonths;
}

//function that converts years into weeks
function yearToWeeks(ageYears) {
ageWeeks = ageYears * 52;
return ageWeeks;
}

//function that converts years into days
function yearToDays(ageYears) {
ageDays = ageYears * 365;
return ageDays;
}

//function that converts years into hours
function yearToHours(ageYears) {
ageHours = ageYears * 8760;
return ageHours;
}

//function that converts years into minutes
function yearToMinutes(ageYears) {
ageMinutes = ageYears * 525600;
return ageMinutes;
}

//function that converts years into seconds
function yearToSeconds(ageYears) {
ageSeconds = ageYears * 31536000;
return ageSeconds;
}
//add event Listener to prevent code from running automatically
conversion.addEventListener("submit", function(event){
event.preventDefault();

//Call the functions and store them in their respective variables
let ageYears = document.getElementById("Input").value;
ageMonths = yearToMonths(ageYears);
ageWeeks = yearToWeeks(ageYears);
ageDays = yearToDays(ageYears);
ageHours = yearToHours(ageYears);
ageMinutes = yearToMinutes(ageYears);
ageSeconds = yearToSeconds(ageYears);

//get the value of years as entered by the user
let result = document.getElementById("result");

//Display result in HTML element called "result"
result.innerHTML = `<p> You are ${ageYears} years old. <br>
You are ${ageMonths} months old. <br>
You are ${ageWeeks} weeks old. <br>
You are ${ageHours} hours old. <br>
You are ${ageMinutes} minutes old. <br>
You are ${ageSeconds} seconds old. </p>`;
}, false);