How do I assign a value to set the font price depending on what the user has selected?

How do I assign a value to set the font price depending on what the user has selected?


I did a lot of Googling t try find an answer or anything similar but I couldn’t.
Before you read the code, I’ll give an example if the user selects the Robato font then that should add €2 to the totalTilePrice.

My attempt so far:

function answer() {
var name = document.forms["priceForm"]["customerName"].value;
var tileText = document.forms["priceForm"]["tileName"].value;
  var font = document.getElementById("fonts");
  var location = document.getElementById("userlocation");
  var tileLength = tileText.length;
  fontPrice = 0;
  var selectedFont=document.getElementById("fonts");
var fontPrice = 2;

  if(document.getElementById("expressOption").checked == true){
var totalPrice = tileLength * 5 + 10 + fontPrice;
  else if(document.getElementById("expressOption").checked == false) {
   var totalPrice = tileLength * 5;
  document.getElementById("output").innerHTML ="Hi " + name + "The Price for your Tile is: "+ totalPrice;
  if(name==""|| tileText =='' || location==""){
alert("Please fill out fields");
  return false;

I know that font price here is out of scope but don’t quite know how to get around the issue.


I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Question: Can you post all of your html code, so that we do not have to create the form on our own?