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 
(+0.0kr)
<br><br>";
rominfoEL.appendChild(infofelt);

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 
id='fornavn' 
type='text'><br><b>Etternavn:</b><br><input id='etternavn' type='text'><br>
<b>E-
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");
btn2.appendChild(t2);

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

rominfoEL.appendChild(btn);
btn.addEventListener("click", regnpris);

function regnpris() {
    btn.removeChild(t);
    rominfoEL.removeChild(btn);
    rominfoEL.removeChild(infofelt);
    rominfoEL.appendChild(datoEL);
    bildeEL.className = "rombilde3";
    rominfoEL.appendChild(btn2);
    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>
    </center>";
    } else {
        pris3 = pris2;
        rominfoEL.innerHTML += "<center><b><p style='font-size:20px'>Prisen for 
    " + romnavn + " for " + g + " personer er " + pris2 + "NOK</p></b>
    </center>";
    }
}

Html:

    <div class="header"><img class="rombilde" src="hotel.png" width="100" 
height="100"><h1>Triveli<i>GO</i></h1></div>
<br><br>


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


</div>

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

</div>

</center><br><br>

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

    2019-11-14

    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>