クロム拡張でボタンをクリックした後でCSS表示タグを更新した後もHTML divが表示されない

ポップアップウィンドウにボタンで構成されるGoogle Chrome拡張機能を構築しようとしています。クロム拡張でボタンをクリックした後でCSS表示タグを更新した後もHTML divが表示されない

このボタンをクリックすると、最初のCSS表示タグが "none"である特定のHMTL div（私の場合はテーブル）が "ブロック"に設定され、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が表示されない

答えて

関連する問題