DOM (JavaScript)

Question

을 사용하여 새 기능으로 새 버튼을 추가하려고했습니다. 새 버튼이 나타나고 첫 번째 항목이 사라지고 (성공적으로 발생했습니다) 새 버튼에 EventListener를 추가하여 실행합니다. 새로운 기능. 이것은 작동하지 않으며, 나는 왜 확실하지 않다. 함수가 정의 된 위치와 방법과 관련이 있다고 생각합니까?

관련 코드 :

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> 

새로운 형태의 버튼이 나타납니다,하지만 난 버튼을 클릭하면 내 기능이 시작되지 않습니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

완전한 HTML을 제공하십시오. 반면에 addEventListener의 세 번째 매개 변수를 "false"로 전달해보십시오.

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

완전한 자바 스크립트 rominfoEL도 제공하십시오.