Hello everyone, I am extremely new to coding to things such as java, html and such. I’ve been doing well so far but now, i’ve run into a bit of a block. I’m also not sure if I can post questions like these on here, if not I apologize I’m also doing the lessons on here as well as taking classes at school. I need help processing the form for this assignment. Java script part is located toward the bottom.
So the prompt of the assignment was to make an invitation based on what was selected and inputted. I’ve had experience using javascript but I’m not sure how to use the functions to process and create the form invitation as in the code pen.
Output would look something like this.
From a few console.log tests, your functions are not being called at all.
Maybe CodePen doesn’t like javascript in your HTML section, maybe something else is going on, but if I make functions with the same names in the Javascript section, they do get called from your button.
Right now, you are defining a whole bunch of variables in these functions and doing nothing with them. These variables will NOT be accessible outside of the function they were declared in.
It will be easier to help if you explain what you are trying to do at your current step, but this should at least get some code running to get you started. If you ever need to check if a section of code is getting called, just console log anything (I often do console.log('hi') or something similarly inane) then check the console to make sure it’s there.
I realized I only declared the variables, I wasn’t sure how to proceed with making the function, usually my professor would give details on the javascript but not for this assignment. This is the first time using CodePen, I saw a lot of forums on here using it, and thought it would be a great way to post my code. At my current step, I’m trying to figure out how to process the three functions when the button is clicked so that it generates an invitation, but I’ve never done anything like it before so I’m lost.
"Create the functions
*Note that there are many different ways to solve this problem. However, it’s up to you to follow the DOM and verify the syntax with the standards and your readings!
Create the three functions, populateStyles, populateFonts and populateImages. Again you can rename them to be appropriate to your program!
Each form element that ‘binds’ to some data structure should have it’s own function. In the example, there is one function for populating the border styles in the dropdown list, one for the fonts, and one for the radiobutton and images. Your program may be different.
In each function populate the form field using JavaScript
For example, in the populateStyles function you might:
Create a string variable, which contains a semi-colon separated list of the values of the border styles attribute.
Create a variable for the array.
Split the string with the border styles using the semi-colon as the delimiter, and pass it to the variable you created.
Rotate through the array.
Retrieve the style for each element (i).
Create an option element and set the name, value and text properties using the border style name from the array.
Append the option element to the form dropdown list or radiobutton list elements in your form.
You could do something similar to bind a list of font names to a dropdown list. The key is you are creating ‘option’ tags/elements to the parent element which may be a select tag, input tag, etc.
Firstly, welcome to the forums.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at http://freecodecamp.com.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
From what you’ve said, it sounds like the piece you might be missing is event listeners. The MDN documentation for .addEventListener() is here.
Happy coding!
1 Like
