Changing display none to block using Javascript and polymer

Question

How to change display from none to block using JavaScript/Polymer.

I tried many things but I can't figure out why it is not working.

My current code:

<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>

If I add alert("test"); for example inside the script tag it's working well, so there is nothing wrong with the button.

The problem is the JavaScript I have added to it.

I want to display the div after clicking on bevestigen
It should change from block to none

Answer 1

You should read about the concepts of Shadow DOM, for example on the Polymer site, here.

The important thing to note here is that you are inside your element called navigatie-element, you can't use the document as a "scope" to query elements in (or in fact you could, but you would query in the top level document, not inside your element).

From what I understand you are interested in your local shadow DOM, so you could try to replace

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

with:

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