CODEWITHSUNDEEP
javascripthtmldompolymer
Bruno Tripoloni
Bruno Tripoloni

Reputation: 43

taking values of tags using polymer

I am trying to create a small web using polymer component but I am facing a problem, I would like that when I give a click on a <span> its contents were stranded on an input, but I do not know how to do this.

what would be the best way to do this?

Upvotes: 0

Views: 251

Answers (1)

frunjik
frunjik

Reputation: 21

Fair warning: I am a Polymer beginner myself :)

Im not sure if i understand your question 100% correctly ... but let's see.

I made an element that copies the contents on a label to an input....

(I tend to use designer as it helps with all the layout stuff).

<!doctype html>
<html>
<head>

  <script src="/components/platform/platform.js"></script>
  <style>
    body {
      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
    }
  </style>

    <link rel="import" href="/components/polymer/polymer.html">
    <link rel="import" href="/components/core-input/core-input.html">
    <link rel="import" href="/components/core-item/core-item.html">
    <link rel="import" href="/components/core-icons/core-icons.html">

  <script>
  </script>

</head>

<body fullbleed unresolved>

<my-element>
</my-element>

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_card {
        position: absolute;
        width: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 130px;
        top: 80px;
        background-color: rgb(255, 255, 255);
      }
      .core_input {
        padding: 15px;
      }
    </style>
    <core-card id="core_card" layout vertical>
      <core-input id="input" placeholder="Type something..." class="core_input"></core-input>
      <core-item on-tap="{{onTap}}" label="Click me!!" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
      <core-item on-tap="{{onTap}}" label="Or Me ?" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
      <core-item on-tap="{{onTap}}" label="[clear]" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
    </core-card>
  </template>

  <script>
    Polymer('my-element', {
      onTap: function(event,detail,sender) {
        var i = this.$.input;           // get hold of the input element via its id 
        if(sender.label == '[clear]')
            i.value = '';
            else        
            i.value = sender.label;
      },
    });
  </script>
</polymer-element>

</body>

</html>

Upvotes: 1

Related Questions