>source

그래서 나는 sololearn 앱에서 code 리포지토리 프로젝트를 하고 있었는데 지금은 버튼 기능을 추가하여 내 자바스크립트 code를 이벤트 처리해야 하는 섹션에 갇혀 있습니다. 버튼을 클릭하면 티켓 가격에 대한 경고 메시지가 표시됩니다.

다음은 내가 충족해야 하는 기준입니다.

  1. window.onload 이벤트 핸들러를 추가합니다.
  2. 내부에서 구매 버튼에 대한 참조를 가져옵니다(참조를 사용할 수 있도록 ID를 할당).
  3. 구매 버튼의 클릭 이벤트 처리: 핸들러 내에서 ID를 사용하여 성인 및 어린이 텍스트 필드의 참조를 가져옵니다.
  4. calc() 함수를 사용하여 티켓의 총 가격을 계산합니다.
  5. 경고() 함수를 사용하여 화면에 가격을 출력합니다.

힌트: .value 속성을 사용하여 현재 값을 가져옵니다. code에서 참조할 수 있도록 구매 버튼에 고유한 ID를 지정하는 것을 잊지 마십시오.

let adults= 1
let children= 13
if (adults < 0) {
  adults= 0;
}
if (children < 0) {
  children= 0;
}
for (let i= 1; i <= adults; i++) {
  console.log("Ticket#" + i);
}
window.onload= function() {
  let btn= document.getElementById("buyBtn");
  btn.onclick= function() {
    let adults= document.getElementById("adults").value;
    let children= document.getElementById("children").value;
    function calc(adults, children) {
      return adults * 12 + children * 6
    }
    let price= calc(adults, children);
    alert(price);
  }
}

strong {
  color: #2493df;
}
footer {
  color: #595959;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}
heading {
  font-size: 20px;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-bottom: 10px;
}
label {
  font-size: 16px;
  font-weight: bold;
}
section {
  padding: 10px;
  background-color: white;
}
body {
  background-color: #e0e0e0;
}
#buy {
  background-color: #687373;
  margin-top: 10px;
  color: #fcfcfc;
}
ul {
  list-style-type: square;
  list-style-position: inside;
  padding-left: 30px;
}
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px;
}
th {
  background-color: #2493df;
  color: white;
}
input[type="number"] {
  padding: 2px;
  text-align: center;
  width: 50px;
}
input[type="button"] {
  background-color: #2493df;
  font-weight: bold;
  font-size: 16px;
  color: white;
  border: none;
  height: 40px;
  width: 100%;
}
form {
  display: flex;
}
.form-section {
  flex: 1;
}
img {
  float: left;
  margin-right: 10px;
}
#buy {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100%;
  box-sizing: border-box;
}

<html><section>  <body>    <heading>      <h1>The Eiffel Tower</h1>    </heading>    <a href="https://test.com" target="_blank"><img src="https://sololearnassets.azureedge.net/eiffel-tower.jpg" alt="Some Image" width="50%"></a>    

The <strong>Eiffel Tower</strong> is a wrought-iron tower that stands <strong>1,063 ft (324 m)</strong> tall in <strong>Paris.</strong>

Currently, the <strong>Eiffel Tower</strong> is the most-visited monument in the world with over <strong>7 million</strong> visitors a year.

Visitors can choose to go up using the Tower lift or the stairs. There are <strong>1,665</strong> steps to the top.

<b>Transport</b> <ul> <li>Bus: lines 42, 69, 72, 82 and 87.</li> <li>Metro: Trocadero, Ecole militaire.</li> <li>Train: Champ de Mars -Tour Eiffel, line C.</li> </UL> <table border="1"><strong>Prices:</strong> <tr> <th>Category</th> <th>Price</th> </tr> <tr> <td>Adults</td> <td>$12</td> </tr> <tr> <td>Children</td> <td>$6</td> </tr> </table> </body></section><section id="buy"> <form> <diV class="form-section"> <label for="name">Adults:</label> <br> <input type="number" id="name"> </div> <div class="form-section"> <label for="name">Children:</label> <br> <input id="buyBtn" type="number" id="name"> </div> <div class="form-section"> <input type="button" value="Buy"> </div> </form></section><footer>&amp; copy Copyright</footer></html>

code를 살펴보고 경고 메시지를 받지 못하는 오류가 있는 경우 알려주시겠습니까?

SO는 무료 디버깅 서비스가 아닙니다. 실제 문제와 직접적으로 관련이 없는 항목을 제거하여 최소한의 재현 가능한 예제로 만드십시오. "경고 메시지가 표시되지 않습니다".

Andreas2022-02-06 04:12:11

논리가 기능 외부에 있는 이유는 무엇입니까? for 루프 code에 let???

epascarello2022-02-06 04:12:11

DOM에서 ID buyBtn이 있는 요소는 무엇입니까? 그리고 그것이 올바른 요소입니까?

Andreas2022-02-06 04:12:11
  • 이전 freertos : LwIP를 초기화하면 RTOS가 작동을 멈춥니다.
  • 다음 c# : OpenTK에서 객체를 투명하게 만드는 방법