크롬 확장 프로그램에서 버튼 클릭 후 CSS 표시 태그를 업데이트 한 후에도 HTML div가 표시되지 않습니다.

팝업 창에 버튼으로 구성된 Google 크롬 확장 프로그램을 빌드하려고합니다.크롬 확장 프로그램에서 버튼 클릭 후 CSS 표시 태그를 업데이트 한 후에도 HTML div가 표시되지 않습니다.

이 단추를 클릭하면 초기 CSS 표시 태그가 "none"인 특정 HMTL div (내 경우에는 표)가 "block"으로 설정되어 해당 div가 팝업 창에 표시되도록합니다 . 내 popup.js 파일에서이 버튼 클릭을 처리하기 위해 이벤트 리스너를 사용했습니다.

문제는 마주 치면 버튼을 클릭하면 div가 표시되도록 만들어져 바로 다음 순간 숨겨집니다. 보이는 상태를 유지하지 않으며 초기 "display : none"설정이 다시 인계되는 것처럼 보입니다. 아래 코드를 찾아이 문제를 해결할 수 있도록 도와주십시오.

의 manifest.json :

{ 
    "manifest_version": 2, 

    "name": "Google Chrome Extension", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "icons": { 
    "64": "icon.png" 
    } 
}

Popup.html :

<!doctype html> 
<!-- 
This page is shown when the extension button is clicked, because the 
"browser_action" field in manifest.json contains the "default_popup" key with 
value "popup.html". 
--> 
<html> 
    <head> 
    <title>Getting Started Extension's Popup</title> 
    <style type="text/css"> 

     body {   
     margin: 10px; 
     white-space: nowrap; 
     } 

     #container { 
     align-items: center; 
     display: flex; 
     justify-content: space-between; 
     } 
     #displayTable { 
     display: none; 
     border-collapse: collapse; 
     width: 100%; 
     }  
     #myTable td, #myTable th { 
     border: 1px solid #ddd; 
     padding: 8px; 
     } 
     #myTable th { 
     background-color: #ddd; 
     } 
    </style> 

    <script src="popup.js"></script> 

    </head> 

    <body> 
    <h1>Google Chrome Extension</h1> 
    <div id="container"> 
     <form> 
     Provide input:<br> 
     <input type="text" id="inputText" maxlength="7"><br> 
     <button id="shoot">Shoot</button> 
     </form> 
    </div> 
    <div id="displayTable"> 
     <table id="myTable"> 
     <tr> 
      <td>Column1</td> 
      <td>Column2</td> 
      <td>Column3</td> 
     </tr> 
     <tr> 
      <td id = "col1"></td> 
      <td id = "col2"></td> 
      <td id = "col3"></td> 
     </tr> 
     </table> 
    </div> 
    </body> 
</html>

Popup.js : 버튼이 형태

document.addEventListener('DOMContentLoaded', function() { 
    var btn = document.getElementById('shoot'); 
    btn.addEventListener('click', getTable); 
}); 

function getTable() { 
    var col1 = document.getElementById('inputText').value; 
    var col2 = 0; 
    var col3 = 0; 
    document.getElementById('col1').innerHTML = col1; 
    document.getElementById('col2').innerHTML = col2; 
    document.getElementById('col3').innerHTML = col3; 
    document.getElementById('displayTable').style.display="block"; 
}

출처

2017-11-26 Russia Aiyappa

은 아마 양식을 제출하고 페이지가 초기 JS를 재설정하는, 다시로드 : 당신이 그것에게 양식을 유지해야하는 경우

, 당신은 제출에서 양식을 방지, 그래서 당신의 코드를 수정해야 및 CSS 속성 표시. – jwebb

때문에,이 양식을 작성한다 popup.html을 다시로드하십시오. 가장 간단한 방법은 양식을 div로 변경하는 것입니다.

document.addEventListener('DOMContentLoaded', function() { 
    var btn = document.getElementById('shoot'); 
    btn.addEventListener('click', getTable); 
    var formElement = document.querySelector('form'); 
    formElement.addEventListener('submit', function(event) { 
     event.preventDefault(); 
     return false; 
    }); 
});

출처

2017-11-26 07:57:31

감사합니다. 후자의 해결책이 효과가없는 것처럼 보였지만 양식을 변경하여 div에 대한 간단한 해결책이 문제를 해결했습니다. –

크롬 확장 프로그램에서 버튼 클릭 후 CSS 표시 태그를 업데이트 한 후에도 HTML div가 표시되지 않습니다.

답변

관련 문제