How can i create an HTML tag through JavaScript?

Question

I have a small menu of 5 items here. What I am trying to do is if the "lollipops" option is selected and a user clicks add to cart button, JavaScript should create a new

tag. I am new to JavaScript and would appreciate any directions or suggestions about what I am doing wrong. I posted a copy of my HTML and JavaScript code below, so please take a look thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 2</title>
</head>
<body>
    <form>
        <div class="container">
            <div class="material">

                <label for="items">Choose an Item: </label>
                <select id="items">
                    <option id="lollipops">Box of Lollipops - $2.00</option>
                    <option id="recipes">Book of Recipes - $4.99</option>
                    <option id="giftwrap">Gift wrapper - $2.75</option>
                    <option id="dogTreats">Dog Treats - $5.00</option>
                    <option id="catTreats">Cat Treats - $$5.00</option>
                </select>

                <input type="button" value="Add To Cart" id="addToCart" onclick="addToCart()">

                <div id="cart">


                    <p id="beforeTax">Before Tax: </p>
                    <p id="price">Total: </p>
                </div>

                <br>

                <label for="name">Name: </label>
                <input type="text" id="name" placeholder="Enter name">
                
                <label for="email">Email: </label>
                <input type="email" id="email" placeholder="Enter email">
                
                <br><br><br>
                
                <label for="creditCard">Credit card number</label>
                <input type="text" id="creditCard" placeholder="xxxx-xxxx-xxxx-xxxx">
                
                <label for="expiryDate">Expiry Date: </label>
                <input type="month">

                <br><br><br>

            </div>    
        </div>

        <input type="button" id="submit" value="Submit">
    </form>

    <script type="text/javascript" src="index.js"></script>
</body>
</html>

JavaScript

//let lollipopsPrice = document.getElementById("lollipops").value;
//let recipePrice= document.getElementById("recipes").value;
//let giftwrapPrice = document.getElementById("giftwrap").value;
//let dogTreatsPrice = document.getElementById("dogsTreats").value;
//let catTreatsPrice = document.getElementById("catTreats").value;

function addToCart()
{

    let item=document.getElementsByTagName("option").value;

    if (item.value=="Box of Lollipops - $2.00")
    {
        document.write("<p>Box of Lollipops - $2.00</p>");
    }


    console.log();

}

`getElementsByTagName` returns an HTMLCollection which is an array-like, so you can't access the `value` directly on it, but will need to iterate over the returned collection. — pilchard, Jun 12 '22 at 23:25
also: [How to loop through all the elements returned from getElementsByTagName](https://stackoverflow.com/questions/19324700/how-to-loop-through-all-the-elements-returned-from-getelementsbytagname) — pilchard, Jun 12 '22 at 23:26

score 0 · Answer 1 · answered Jun 12 '22 at 23:41

To write something in the document you can use can use append, or innerHTML.

When the option is selected it will fire the addToCart function, and depending on where you want to write the new element (when you say "javascript should create a new tag", I imagine you mean a new element).

As you can see following the links, you create a div,p and text inside the p, like this:

let div = document.createElement("div");
let p = document.createElement("p");
div.append(p)
p.append("some text")

or you could use innerHTML like this:

p.innerHTML = "some text in innerHTML"

Even though, as stated on the Developer Mozilla site, innerHTML presents some vulnerability issues and it is recommended to use the setHTML() method to sanitize user inputs. In your case it's a selection so it is not much relevant.

How can i create an HTML tag through JavaScript?

1 Answers1