HTML div bleibt auch nach dem Aktualisieren des CSS-Anzeige-Tags nicht sichtbar, um nach einem Klick in der Chrome-Erweiterung zu blockieren

Ich versuche eine Google Chrome-Erweiterung zu erstellen, die aus einer Schaltfläche im Popup-Fenster besteht.HTML div bleibt auch nach dem Aktualisieren des CSS-Anzeige-Tags nicht sichtbar, um nach einem Klick in der Chrome-Erweiterung zu blockieren

Wenn ich auf diese Schaltfläche klicke, möchte ich ein bestimmtes HMTL div (eine Tabelle in meinem Fall), für das die anfängliche CSS-Anzeige "none" auf "block" gesetzt ist, damit das div im Popup-Fenster sichtbar gemacht wird . In meiner popup.js-Datei habe ich einen Ereignis-Listener verwendet, um diesen Klick zu verarbeiten.

Das Problem ist, dass, sobald ich den Knopf klicke, das div, das sichtbar gemacht wurde, erscheint und im nächsten Moment versteckt wird. Es bleibt nicht sichtbar und sieht so aus, als ob die ursprüngliche "display: none" Einstellung wieder übernommen wird. Bitte finden Sie meinen Code unten und helfen Sie mir, dieses Problem zu lösen.

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"; 
}

Quelle

2017-11-26 Russia Aiyappa

Wahrscheinlich wird das Formular einreichen und Ihre Seite neu lädt, die die anfängliche JS setzt und CSS-Eigenschaftenanzeige. – jwebb

Da die Taste in einer Form ist, wird die Form der Einreichung und popup.html neu laden. Die einfachste Sache ist, ändern Sie einfach Ihre Form zu einem div.

Wenn Sie es ein Formular halten möchten, müssen Sie das Formular, um zu verhindern einreichen, so ändern Sie Ihren Code:

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; 
    }); 
});

Quelle

2017-11-26 07:57:31

Danke! Obwohl die letztere Lösung nicht zu funktionieren schien, hat die einfache Lösung, die Form in div zu ändern, das Problem für mich behoben. –

HTML div bleibt auch nach dem Aktualisieren des CSS-Anzeige-Tags nicht sichtbar, um nach einem Klick in der Chrome-Erweiterung zu blockieren

Antwort

Verwandte Themen