将显示 none 更改为使用 Javascript 和聚合物来阻止

Question

如何使用 JavaScript/Polymer.

将显示从 none 更改为 block

我尝试了很多东西，但我不明白为什么它不起作用。

我当前的代码：

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<dom-module id="navigatie-element">
  <template>
    <style type="text/css">

    #header {
      height: 50px;
      background-color: #D8434A;
      margin-left: -8px;
      margin-top: -8px;
      margin-bottom: 9px;
      border-bottom: 2px solid white;
    }

    #header img {
      margin-top: 2px;
      margin-left: 10px;
      width: 218px;
      height: 46px;
    }

    #navbar {
      background-color: #D8434A;
      width: 214px;
      height: 100%;
      position: fixed;
      margin-left: -8px;
      margin-top: -8px;
    }

    #navbar ul {
      margin-left: -40px;
      margin-top: -33px;
    }

    #navbar ul li {
      display: absolute;
      width: 200px;
      height: 40px;
      margin-top: 6px;
      padding-top: 8px;
    }

    #navbar ul li a {
      text-decoration: none;
      display: block;
      background-color: white;
      color: white;
      position: absolute;
      width: 200;
      background-color: #D8434A;
      text-align: left;
      padding-left: 10px;
      border-bottom: 2px solid white;
      border-right: 4px solid orange;
      line-height: 50px;
    }

    #navbar ul li a:hover{
      background-color: #FFFA75;
    }

    #navbar ul li img {
      height: 30px;
      width: 30px;
      margin-right: 10px;
      margin-bottom: -9px;
    }

    #input-field label{
      position: relative;
      left: 500px;
      top: 100px;
    }
    #input-field paper-input{
      position: relative;
      left: 520px;
      top: 90px;
    }
    #input-field paper-button{
      position: relative;
      left: 550px;
      top: 90px;
    }
    #input-field h1{
      position: relative;
      left: 635px;
      top: 50px;
    }
    #input-field2{
      display: none;
    }
    #input-field2 label{
      position: relative;
      left: 500px;
      top: 100px;
    }
    #input-field2 paper-input{
      position: relative;
      left: 520px;
      top: 90px;
    }
    #input-field2 paper-button{
      position: relative;
      left: 550px;
      top: 90px;
    }

    </style>
    <div id="header">
      <img src="afbeeldingen/header_naam.png">
    </div>
    <div id="navbar">
      <ul>
        <li><a href="bestellen.html"><img src="afbeeldingen/menu_bestellen.png">Bestellen</a></li>
        <li><a href="bestellingen.html"><img src="afbeeldingen/menu_bestellingen.png">Bestellingen</a></li>
        <li><a href="serveren.html"><img src="afbeeldingen/menu_serveren.png">Serveren</a></li>
        <li><a href="afrekenen.html"><img src="afbeeldingen/menu_afrekenen.png">Afrekenen</a></li>
      </u>
    </div>

    <div id="input-field">
      <h1>Afrekenen</h1>
      <table>
        <tr>
          <td><label>Tafelnummer:</label></td>
          <td><paper-input class="test" label=""></paper-input></td>
          <td><paper-button on-click="bevestigen" raised>Bevestigen</paper-button></td>
        </tr>
      </table>
    </div>

    <div id="input-field2">
      <table>
        <tr>
          <td><label>Betaalmethode:</label></td>
          <td><paper-button on-click="contant" raised>Contant</paper-button></td>
          <td><paper-button on-click="pin" raised>PIN</paper-button></td>
        </tr>
      </table>
    </div>

  </template>
</dom-module>
<script>
    Polymer({
      is: 'navigatie-element',
      bevestigen: function() {
        if (document.getElementById("input-field2").style.display == "block") 
        {
          document.getElementById('input-field2').style.display = 'none';
        }
        else 
        {
          document.getElementById('input-field2').style.display = 'block';
        }
      }
    });
class NavigatieElement extends Polymer.Element{
  static get is() { return 'navigatie-element';}
  }

window.customElements.define(NavigatieElement.is, NavigatieElement);
</script>

例如，如果我在脚本标签内添加 alert("test");，它运行良好，因此按钮没有任何问题。

问题是 JavaScript 我已经添加进去了。

我想在点击 bevestigen
后显示 div 它应该从 block 更改为 none

Answer 1

您应该阅读 Shadow 的概念 DOM，例如在 Polymer 站点 here 上。

这里要注意的重要一点是，您位于名为 navigatie-element 的元素内，您不能将 document 用作 "scope" 来查询元素在（或在事实上你可以，但你会在顶级文档中查询，而不是在你的元素中。

据我了解，您对本地影子感兴趣 DOM，因此您可以尝试更换

if (document.getElementById("input-field2").style.display == "block") 
{
  document.getElementById('input-field2').style.display = 'none';
}
else 
{
  document.getElementById('input-field2').style.display = 'block';
}

与：

if (this.shadowRoot.getElementById("input-field2").style.display == "block") 
{
  this.shadowRoot.getElementById('input-field2').style.display = 'none';
}
else 
{
  this.shadowRoot.getElementById('input-field2').style.display = 'block';
}

将显示 none 更改为使用 Javascript 和聚合物来阻止

Changing display none to block using Javascript and polymer

html

javascript

polymer