Attempting to add new button with new function attached using DOM(JavaScript)

here I am trying to have a new button appear and the first disappear(that succesfully happens), and then add an EventListener to the new button so it can run a new function. This does not work, and I am not sure why. I am thinking it has something to do with where and how the function is defined?

Relevant code:

  var bodyEL = document.querySelector("body");
var divRomEL = document.querySelector(".rom");
var rominfoEL = document.querySelector(".rominfo");
  var infofelt = document.createElement("form");
infofelt.innerHTML = "<b>Hvilket rom ønsker du?</b><br><select id='romvalg'>
<option value='1' name='romnr'>Rom med havutsikt</option><option value='2' 
name='romnr'>Rom med gateutsikt</option><option value='3' 
  name='romnr'>Treroms suite</option><option value='4' 
name='romnr'>Presidentsuite</option></select><br><br><b>Hvor mange personer 
vil sjekke inn?<b><br> Maksimum: 10<br><input type='number' max='10' min='1' 
placeholder='1' id='senger'><br><br><b>Vil du leie wifi?</b><br><input 
type='radio' name='wifi3' id='wifi1' value='1'>Ja 
(+100kr)<br><input type='radio' name='wifi3' id='wifi' value='2'>Nei 

var velgromEL = document.querySelector("#romvalg");
var buttonEL = document.querySelector("#førpris");
var sengerEL = document.querySelector("#senger");
var wifiEL = document.querySelector("#wifi");
var wifi1EL = document.querySelector("#wifi1");
var bildeEL = document.querySelector("#rombilde2");
var nyDivEL = document.querySelector("#nydiv")

var datoEL = document.createElement("p");
datoEL.className = "ny";
datoEL.innerHTML = "<form method='GET'><b>Fornavn:</b><br><input 
type='text'><br><b>Etternavn:</b><br><input id='etternavn' type='text'><br>
post:</b><br><input id='epost' type='text'><br><b>Kortnummer:</b><br><input 
 id='kortnr' type='text'><br></form>";

var btn2 = document.createElement("BUTTON");
var t2 = document.createTextNode("Fullfør bestilling");

var btn = document.createElement("BUTTON");
var t = document.createTextNode("Regn pris og gå videre");

btn.addEventListener("click", regnpris);

function regnpris() {
    bildeEL.className = "rombilde3";
    btn2.onclick = function () {
        fornavnb = document.querySelector("#fornavn");
        etternavnb = document.querySelector("#etternavn");
        epostb = document.querySelector("#epost");
        kortnrb = document.querySelector("#kortnr");

    if (velgromEL.value == "1") {
        pris1 = 1000;
        var romnavn = "et rom med havutsikt";
    } else if (velgromEL.value == "2") {
        pris1 = 1500;
        bildeEL.src = "gateutsikt.JPG"
        var romnavn = "et rom med gateutsikt";
    } else if (velgromEL.value == "3") {
        pris1 = 3000;
        bildeEL.src = "suite.jpg";
        var romnavn = "en suite";
    } else {
        pris1 = 10000;
        bildeEL.src = "presidentialsuite.jpg";
        var romnavn = "en presidentsuite";

    var g = Number(sengerEL.value);
    var pris2 = g * pris1;

    if (wifi1EL.checked) {
        pris3 = pris2 + 100;
        rominfoEL.innerHTML += "<center><b><p style='font-size:20px'>Prisen for 
    " + romnavn + " for " + g + " person er " + pris3 + "NOK</p></b>
    } else {
        pris3 = pris2;
        rominfoEL.innerHTML += "<center><b><p style='font-size:20px'>Prisen for 
    " + romnavn + " for " + g + " personer er " + pris2 + "NOK</p></b>


    <div class="header"><img class="rombilde" src="hotel.png" width="100" 

<center><div class="rom">
<div class="rominfo">


 <div class="rombilde2"><img id="rombilde2" src="havutsikt.jpg" width="420" 



The new form and button appears, but when I click the button my function does not start. Thanks for any help, in advance.

1 Answer

  1. Bob- Reply


    Please provide the complete HTML, Meanwhile you can try passing 3rd parameter to addEventListener as "false".

    btn.addEventListener("click", regnpris, false);

    Also provide the complete javascript rominfoEL is missing.

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>