>

이러한 것들에 익숙하지 않아서 답을 찾았지만 찾을 수 없었습니다.

SharePoint 2013에서 ICE (비상시) 카드를 생성하는 페이지를 만들었습니다. 아래 코드는 SP 외부의 별도 HTML 파일로 자체 작동하지만 CEWP를 사용하여 스크립트 편집기 웹 파트에 붙여 넣을 때 인쇄 창이 열리지 않습니다.generateCard기능은 문제없이 작동하지만printCard는 작동하지 않습니다-인쇄 대화 상자가 나타나지 않습니다.

내가 뭘 잘못하고 있는지 아는가?

HTML :

<html>
    <h1>ICE Card Generator</h1>
    <p>Enter your details in the form below and click <em>Generate card</em>. After your card has been generated, you can print it.</p>
<form>
    Your name:<input type="text" id="name">
    <br>Your phone number:<input type="text" id="phone">
    <br>Blood type: <input type="text" id="blood">
    <br>Emergency contact name:<input type="text" id="emergencyName">
    <br>Emergency contact's phone number: <input type="text" id="emergencyPhone">
</form>
<br>
<button type="button" onclick="generateCard()">Generate card</button><br>
<br>
<div id="card">
  <h1 id="card_my_details">Card holder</h1>
  <p>Name: <span id="cardName">/</span>
  <p>Email: <span id="cardPhone">/</span>
  <p>Blood type: <span id="cardBlood">/</span>
  <h1 id="card_emergency_contacts">Emergency contacts</h1></span>
  <p>Emergency contact: <span id="cardEmergencyName">/</span>
  <p>Emergency contact's phone number: <span id="cardEmergencyPhone">/</span>
  </div>
<br>
<button type="button" click="printCard()">Print card</button>
<script type="text/javascript" src="/assets/ice_script.js">
</html>

자바 스크립트 :

function generateCard() {
    document.getElementById('cardName').innerHTML =
                document.getElementById("name").value;
    document.getElementById('cardPhone').innerHTML =
                document.getElementById("phone").value;
    document.getElementById('cardBlood').innerHTML =
                document.getElementById("blood").value;
    document.getElementById('cardEmergencyName').innerHTML =
                document.getElementById("emergencyName").value;
    document.getElementById('cardEmergencyPhone').innerHTML =
                document.getElementById("emergencyPhone").value;
    }

    function printCard() {
      var thisWillBePrinted = document.getElementById("card").innerHTML;
      var everythingOnPage = document.body.innerHTML;
      document.body.innerHTML = thisWillBePrinted;
      window.print();
      document.body.innerHTML = everythingOnPage;
    }

CSS도 있지만, 인쇄 대화 상자를 표시하는 방법은 당면한 질문과 관련이 있다고 생각합니다. 어떤 브라우저에서도 작동하지 않습니다.

정말 감사합니다!


  • 답변 # 1

    클릭 이벤트를 처리하기위한 올바른 속성 이름은 onclick 입니다.   click 가 아니라 .

    변경해야합니다

    <button type="button" click="printCard()">Print card</button>
    
    

    으로

    <button type="button" onclick="printCard()">Print card</button>
    
    
    <시간>

    참고

    인라인 이벤트 핸들러를 addEventListener() 로 대체하여 사용할 수 있습니다.  가독성을 향상시키는 방법.

    <button type="button" id="printButton">Print card</button>
    
    
    <시간>
    document.getElementById("printButton").addEventListener('click', function () {
        printCard();
    }
    
    

    Onclick 참조 (MDN)

  • 이전 ibm datapower - 여러 규칙에 대해 동일한 작업 실행
  • 다음 pyspark - sparksql str_to_date 대안