獲取Polymer中文本字段的值

Question

我有一個簡單的紙張輸入，我試圖從中獲取價值，但由於某種原因，我沒有任何運氣。 這是HTML的簡化版本，我在其中設置了按鈕和onclick事件：

  <paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
        <core-header-panel flex id="annotation-box">
            <core-toolbar class="graph-sets-header">
              <span flex>TEST</span>
            </core-toolbar>
            <br>
            <paper-input-decorator label="Add your annotation">
                <paper-autogrow-textarea>
                    <textarea id="annotationSource"></textarea>
                </paper-autogrow-textarea>
            </paper-input-decorator>
            <paper-button dismissive hover >Cancel</paper-button>
            <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
        </core-header-panel>
    </paper-action-dialog>

這是我的JS功能：

function getAnnotation(){

    var toolText = document.getElementById('annotationSource').value;
        console.log(toolText);

}

這是一個大部分運行的plunker（除了我無法獲得在控制台中顯示的紙張輸入的值： http ：//plnkr.co/edit/1PAi13ISgP7mNXDMNStF？p = preview

我肯定可以把它變成一個聚合物模板，但我需要將值傳遞給主HTML中的一堆其他函數，並且我一直存在將數據移入和移出模板的問題所以我想避免這樣做如果我能。

添加更多流程以使其更清晰*要打開注釋框，您需要單擊圖形中的任何點在plunker中 - 這樣做會打開紙張輸入框，我想用它來創建注釋...最終將注釋文本添加到工具提示中，該工具提示將通過鼠標懸停在我生成的點上顯示

Answer 1

使用“自動綁定”模板，可以更輕松地訪問annotationSource元素

 var chart = c3.generate({ bindto: '#graph', padding: { top: 30 }, data: { xs: { 'data1': 'x1', 'data2': 'x2', }, columns: [ ['x1', 1, 3, 4, 5, 7, 10], ['x2', 3, 5, 7, 10, 12], ['data1', 2, 3, 6, 7.5, 8, 9.5], ['data2', 2, 4, 4.5, 10, 11] ], onclick: function(d, i) { console.log("onclick", d, i); console.log(i.getAttribute('cx')); var setCX = Number(i.getAttribute('cx')); document.getElementById("someTemplate").$.addAnnotation.toggle() var svg = d3.select("svg"); var circle = svg.append("circle") .attr("cy", 10) .attr("cx", (setCX + 40)) .attr("r", 5); } } }); function getAnnotation() { var annotationSource = document.getElementById("someTemplate").$.annotationSource; var toolText = annotationSource.value; console.log(toolText); } 

 <script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script> <link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import"> <link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html"> <link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" /> <script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script> <script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script> <template id="someTemplate" is="auto-binding"> <paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center"> <core-header-panel flex id="annotation-box"> <core-toolbar class="graph-sets-header"> <span flex>TEST</span> </core-toolbar> <br> <paper-input-decorator label="Add your annotation"> <paper-autogrow-textarea> <textarea id="annotationSource"></textarea> </paper-autogrow-textarea> </paper-input-decorator> <paper-button dismissive hover>Cancel</paper-button> <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button> </core-header-panel> </paper-action-dialog> </template> <div id="graph"> </div> 

Answer 2

確定沒有使用模板我已經使用window.event來獲取被點擊的紙質按鈕元素，然后從那里抓取注釋框元素然后使用querySelector來獲取annotationSource元素。 可能有更好的方法，但它的工作原理

 var chart = c3.generate({ bindto: '#graph', padding: { top: 30 }, data: { xs: { 'data1': 'x1', 'data2': 'x2', }, columns: [ ['x1', 1, 3, 4, 5, 7, 10], ['x2', 3, 5, 7, 10, 12], ['data1', 2, 3, 6, 7.5, 8, 9.5], ['data2', 2, 4, 4.5, 10, 11] ], onclick: function(d, i) { console.log("onclick", d, i); console.log(i.getAttribute('cx')); var setCX = Number(i.getAttribute('cx')); document.querySelector('#addAnnotation').toggle() var svg = d3.select("svg"); var circle = svg.append("circle") .attr("cy", 10) .attr("cx", (setCX + 40)) .attr("r", 5); } } }); function getAnnotation() { var paperBtnElement = window.event.toElement || window.event.relatedTarget || window.event.target; var toolText = paperBtnElement.parentElement.querySelector("#annotationSource").value; console.log(toolText); } 

 div.tooltip { position: absolute; text-align: center; width: 60px; height: 12px; padding: 8px; font: 10px sans-serif; background: #ddd; border: solid 1px #aaa; border-radius: 8px; pointer-events: none; } 

 <script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script> <link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import"> <link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html"> <link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" /> <script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script> <script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script> <paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center"> <core-header-panel flex id="annotation-box"> <core-toolbar class="graph-sets-header"> <span flex>TEST</span> </core-toolbar> <br> <paper-input-decorator label="Add your annotation"> <paper-autogrow-textarea> <textarea id="annotationSource"></textarea> </paper-autogrow-textarea> </paper-input-decorator> <paper-button dismissive hover>Cancel</paper-button> <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button> </core-header-panel> </paper-action-dialog> <div id="graph"> </div>