Click here to Skip to main content
14,920,539 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Is there an easier way of doing any of this code? I would also like to make the font bold, and make firstname be a seperate colour from the rest of the text.

The code is displaying form data to the user - thanking them for checking in.

Also, is there anyway for me to use CSS to help with the font & text alignment properties?


JavaScript
function results() {

    var firstname = document.getElementById("firstname").value;
    var lastname = document.getElementById("lastname").value;
    var location = document.getElementById("location").value;
    
    document.getElementById('my-form').innerHTML = " Thank you "+ firstname +" for checking in.";
    document.getElementById('my-form').style.fontFamily = 'Manrope', sans-serif;
    document.getElementById('my-form').style.color = 'white'

    return false;
}


What I have tried:

Looking for cleaner & more code friendly options.
Posted
Comments
Richard Deeming 30-Apr-20 13:00pm
   
NB: You need to HTML-encode the user input before appending it to the document. Currently, if the user enters a firstname of:
Robert <script>alert('Boom!');</script>

you page will display an alert message.

The simplest option would be to use the innerText[^] property instead of the innerHTML property.
thecoziest 30-Apr-20 13:22pm
   
How would I go about changing the colour & aligning innerText?
raddevus 30-Apr-20 13:33pm
   
create a specific span or div element with an id="yourId", then use query selector to select the item and add the style to the specific item.
Also, modern element selector is document.querySelector("#yourId") for single and document.querySelectorAll(".classItem") -- returns collection of elements (id selector can be used with querySelectorAll() also.
[no name] 29-May-20 12:50pm
   
You can text align with CSS like this:
body{
text-align:center:
}
You can change center to left or right if you want.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900