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。

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

Answer 1

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

这里需要注意的重要一点是，您位于名为navigatie-element的元素中，您不能将document用作＆＃34;范围＆＃34;查询中的元素（或实际上你可以，但你会在顶级文档中查询，而不是在你的元素内查询。）

根据我的理解，您对本地影子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';
}

使用Javascript和聚合物更改显示无阻止

1 个答案: