How to create a button using only JS and HTML

Question

I was asked to create a very very basic POS after some the user selects what the what to buy and the quantity, it should show on a table row showing price, quantity and product; i´ve done that already but i was also asked to make a button next to the row that could eliminate the whole row if the user wants to. Here is my JS code:

function histrow() {

    var prod = document.getElementById("product");
    var cant = document.getElementById("quantity");
    var pre = document.getElementById("prrice");
    var table = document.getElementById("tblHistory");
    var posicion = table.rows.length;
    var newRow = table.insertRow(posicion);

    //Creates the new cells
    var celUno = newRow.insertCell(0);
    var celDos = newRow.insertCell(1);
    var celTres = newRow.insertCell(2);
    var celCuatro = newRow.insertCell(3);
    var celCinco = newRow.insertCell(4);

    //Starts to asign values to the cells 
    celUno.innerHTML = prod.value;
    celDos.innerHTML = cant.value;
    celTres.innerHTML = pre.value;
    //This is the TOTAL
    celCuatro.innerHTML = pre.value * cant.value;
    //Here is where I want the button to show
    celCinco.innerHTML = 


}

I can't create just a button on HTML because I don't how many rows will the user create, my teacher is will only allow us to use HTML and JavaScript It's my first semester in software engineering Thanks for the help

 <!-- App4 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>

<div id="part1">
    <center>
            <h2> POS </h2>
            <br />
            <br />
            <select class="venta" id="product">
                <option>Choose a product</option>
                <option id="1" >1</option>
                <option id="2" >2</option>
                <option id="3" >3</option>
                <option id="4" >4</option>
                <option id="5" >5</option>
                <option id="6" >6</option>
                <option id="7" >7</option>
                <!--Hasta aqui van las bebidas-->
                <option id="8" value="Cheetos">Cheetos</option>
                <option id="9">9</option>
                <option id="10">10</option>
                <option id="11">11</option>
                <option id="12">12</option>
                <option id="13">13</option>
                <option id="14">14</option>
                <option id="15">15</option>
            </select>
            <label> Product</label>
            <br />
                <!--Es el precio del producto-->
            <input type="number" id="prrice" placeholder="¿How much?" class="sale" />
            <label> Price</label>
            <br />
                 <!--Its the quantity of the product-->
            <input type="number" min="1" id="quantity" placeholder="¿How many?" class="sale" />
            <label> Quantity</label>
            <br />
            <br />
                <!--This button adds the order to the table -->
            <button id="btnadd">Add to order </button>

    </center>
    </div>

<!--Here is the table where it shows what the user orders-->

<div id="part2">
    <table id="tblHistory>
        <thead>
            <tr>
                <td>Product</td>
                <td>Quantity</td>
                <td>Price</td>
                <td>Total</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Where is your HTML you have so far?

Adam Buchanan Smith
– Adam Buchanan Smith

2015-10-09 23:19:14 +00:00
Commented Oct 9, 2015 at 23:19 — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Oct 9, 2015 at 23:19
you're looking for the document.createElement()

Juan
– Juan

2015-10-09 23:19:41 +00:00
Commented Oct 9, 2015 at 23:19 — Juan
– Juan, Commented Oct 9, 2015 at 23:19

Adam Buchanan Smith · Accepted Answer · 2015-10-09 23:40:37Z

1

This is what you want, i added a button to the fiddle so you have an event to see it work: https://jsfiddle.net/0j1me71m/3/

    function editTextArea() {
       var options = document.getElementById("options");
       options.innerHTML = options.innerHTML + "<button type='button' onclick='doSomething()'>I am a Button</button><br>";
    }
    function doSomething(){
       alert("see me work!");
    }

edited Oct 9, 2015 at 23:40

answered Oct 9, 2015 at 23:31

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Geocrafter · Accepted Answer · 2015-10-09 23:40:51Z

1

Here is your answer:

http://liveweave.com/gGxK4b

JavaScript:

// Create the button and the text inside
var btn = document.createElement("button");
var btnText = document.createTextNode("This is just a button");
btn.appendChild(btnText);

// Add to the div (main)
var element = document.getElementById("main");
element.appendChild(btn);

HTML:

<div id="main">
</div>

answered Oct 9, 2015 at 23:40

Geocrafter

8151 gold badge8 silver badges18 bronze badges

Comments

Oriol · Accepted Answer · 2015-10-09 23:38:05Z

0

What you're trying to do is suboptimal.

Instead, have your HTML button defined in a variable and inject it to the page when needed.

Basically something like this:

<script>
var button = "<button style=\"background-color:green; border:1px solid darkgreen; color:white; font-weight:bold; padding: 5px 10px;\">PURCHASE</button>";

document.getElementById('tag-id').innerHTML = button;
</script>

See Demo

answered Oct 9, 2015 at 23:38

Oriol

13k5 gold badges40 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to create a button using only JS and HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related