Javascript 获取聚合物中文本字段的值

我有一个简单的纸张输入，我试图从中获取值，但由于某些原因，我没有任何运气。下面是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>

这是一个大部分都在运行的plunker（除非我无法获得要在控制台中显示的纸张输入值：

我确信这可以成为一个聚合模板，但我需要将值传递给主HTML中的一系列其他函数，并且我在将数据移入和移出模板时一直遇到问题，因此如果可以的话，我希望避免这种情况

添加更多流以使其更清晰*

---

要打开注释框，您需要单击plunker中图形上的任何点-这样做会打开纸张输入框，我想用它来创建注释…最终将注释文本添加到工具提示中，通过将鼠标悬停在我生成的点上而不使用我使用过的模板来显示使用window.event获取正在单击的paper button元素，然后从中抓取annotation box元素，然后使用querySelector获取annotationSource元素。可能有更好的方法，但效果更好

var图表=c3.generate({
bindto:“#图”，
填充：{
排名：30
},
数据：{
xs:{
'data1'：'x1'，
“数据2”：“x2”，
},
栏目：[
[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：函数（d，i）{
log（“onclick”，d，i）；
log（i.getAttribute（'cx'）；
var setCX=Number（i.getAttribute（'cx'）；
document.querySelector（'#addAnnotation'）.toggle（）
var svg=d3.选择（“svg”）；
var circle=svg.append（“circle”）
.attr（“cy”，10）
.attr（“cx”，（setCX+40））
.attr（“r”，5）；
}
}
});
函数getAnnotation（）{
var paperBtnElement=window.event.toElement | | window.event.relatedTarget | | window.event.target；
var toolText=paperBtnElement.parentElement.querySelector（“#annotationSource”）.value；
console.log（工具文本）；
}

div.tooltip{
位置：绝对位置；
文本对齐：居中；
宽度：60px；
高度：12px；
填充：8px；
字体：10px无衬线；
背景：ddd；
边框：实心1px#aaa；
边界半径：8px；
指针事件：无；
}

试验


取消
提交

使用“自动绑定”的模板，更容易访问annotationSource元素

var图表=c3.generate({
bindto:“#图”，
填充：{
排名：30
},
数据：{
xs:{
'data1'：'x1'，
“数据2”：“x2”，
},
栏目：[
[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：函数（d，i）{
log（“onclick”，d，i）；
log（i.getAttribute（'cx'）；
var setCX=Number（i.getAttribute（'cx'）；
document.getElementById（“someTemplate”）.$.addAnnotation.toggle（）
var svg=d3.选择（“svg”）；
var circle=svg.append（“circle”）
.attr（“cy”，10）
.attr（“cx”，（setCX+40））
.attr（“r”，5）；
}
}
});
函数getAnnotation（）{
var annotationSource=document.getElementById（“someTemplate”）.$.annotationSource；
var toolText=annotationSource.value；
console.log（工具文本）；
}

试验


取消
提交

尝试Plunker：如果我在纸质输入中键入'foo'并在控制台中点击submit it logs（提交日志）。奇怪的是，这是一个旧Plunker，我不知何故没有正确分叉-这是正确的（）将在主体中更新，因为柱塞箱似乎仍然混乱不堪，我意识到关于如何打开纸对话框的指令不太清楚-添加了更详细的指令，所以这是一个愚蠢的问题（因为我仍在学习聚合物上的绳索）-把模板放在另一个“正常”的中间。html页面有什么问题吗？

function getAnnotation(){

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

}