Question

我的聚合物项目中有一个主文件。我在<script>标签中编写了javascript代码。这个代码应该在事件触发时执行。但是这段代码没有执行!!! 请帮我解决这个问题。这是我的主要文件：

    <!doctype html>
<html>
<head>
<title>bam</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/iron-iconset/iron-iconset.html">
<link rel="import" href="bower_components/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/av-icons.html">
<link rel="import" href="bower_components/iron-icons/communication-icons.html">
<link rel="import" href="bower_components/iron-icons/device-icons.html">
<link rel="import" href="bower_components/iron-icons/editor-icons.html">
<link rel="import" href="bower_components/iron-icons/hardware-icons.html">
<link rel="import" href="bower_components/iron-icons/image-icons.html">
<link rel="import" href="bower_components/iron-icons/maps-icons.html">
<link rel="import" href="bower_components/iron-icons/notification-icons.html">
<link rel="import" href="bower_components/iron-icons/social-icons.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs-icons.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-item/paper-item-body.html">
<link rel="import" href="bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="bower_components/paper-material/paper-material.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
paper-toolbar.main-toolbar {
    background-color: #009688 !important;
}
paper-toolbar.drawer-toolbar {
    background-color: #80CBC4 !important;
}
paper-toolbar.drawer-toolbar h3 {
    text-align: center;
    margin: 0 !important;
}
paper-header-panel[drawer] {
    background-color: #F5F5F5 !important;
}
/*
        paper-header-panel[main] {
            background-color: #E0E0E0 !important;
        }
        */
paper-toolbar > #topBar, paper-toolbar > #middleBar, paper-toolbar > #bottomBar {
    flex-direction: row-reverse;
}
paper-toolbar span.title {
    text-align: center;
}
paper-toolbar > #topBar span.title {
    font-size: 25px;
    letter-spacing: 3px;
}
paper-toolbar #tabsContent {
    flex-direction: row-reverse;
}
paper-menu {
    background-color: transparent !important;
}
paper-icon-item {
    text-align: right;
    direction: rtl;
}
iron-pages paper-material {
    width: 200px;
    height: 250px;
    margin: 10px 0;
}
</style>
<style is="custom-style">
.tab-pages {
 @apply(--layout-horizontal);
 @apply(--layout-horizontal-reverse);
 @apply(--layout-wrap);
 @apply(--layout-around-justified);
}
</style>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
</head>

<body class="fullbleed vertical layout">
<template is="dom-bind" id="site-template">
  <paper-drawer-panel right-drawer> 
    <!-- Drawer -->
    <paper-header-panel class="flex" mode="waterfall" drawer>
      <paper-toolbar class="drawer-toolbar">
        <h3 class="title">منو</h3>
      </paper-toolbar>
      <div class="fit">
        <paper-menu>
          <paper-icon-item>
            <iron-icon icon="hardware:phone-iphone" item-icon></iron-icon>
            گوشی </paper-icon-item>
          <paper-icon-item>
            <iron-icon icon="hardware:tablet-mac" item-icon></iron-icon>
            تبلت </paper-icon-item>
          <paper-icon-item>
            <iron-icon icon="hardware:laptop-mac" item-icon></iron-icon>
            لپ تاپ </paper-icon-item>
        </paper-menu>
      </div>
    </paper-header-panel>
    <!-- Content -->
    <paper-header-panel class="flex" mode="waterfall" main>
      <paper-toolbar class="main-toolbar medium-tall">
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <span class="title">Tip Top Tech</span>
        <paper-tabs selected="{{tabSelect}}" class="middle fit">
          <paper-tab>محبوب ترین</paper-tab>
          <paper-tab>پر بازدید ترین</paper-tab>
          <paper-tab>پر فروش ترین</paper-tab>
          <paper-tab>جدید ترین</paper-tab>
        </paper-tabs>
      </paper-toolbar>
      <div class="fit">
        <iron-pages class="fit" selected$="[[tabSelect]]">
          <div class="tab-pages">
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
            <paper-material class="product-item" elevation="[[pElv]]" animated></paper-material>
          </div>
          <div class="tab-pages">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="tab-pages">Page 3</div>
          <div class="tab-pages">Page 4</div>
        </iron-pages>
      </div>
    </paper-header-panel>
  </paper-drawer-panel>
</template>
<script type="text/javascript">
    var siteTemplate = document.querySelector('#site-template');
    siteTemplate.tabSelect = 0;
    var productElevation=document.querySelector('.product-item');


//the beneath code doesn't execute
    productElevation.onmouseenter=function(){
        alert('why alert doesn't execute in polymer main file?!!');
        };


</script>
</body>
</html>

我的聚合物版本是1

Answer 1

有一个错字！

尝试：

alert("why alert doesn't execute in polymer main file?!!");

Answer 2

1 document.querySelector（＆＃39; .product-item＆＃39;）只会为您提供第一个包含.product-item类的元素，因此如果您想将事件附加到所有元素上 class .product-item使用 document.querySelectorAll（＆＃39; .product-item＆＃39;），它将返回包含类.product-item的元素数组

2 循环遍历数组和绑定事件

       var productElevation=document.querySelectorAll('.product-item');
        for(var i =0 ; i<productElevation.length; i++){
            productElevation[i].onmouseenter= yourFunction();
        }
        function yourFunction(){
            //your code
        }

并确保将代码放在window的onload事件中，以便创建所有聚合物组件并可用于DOM查询。

3 您的代码会在参数列表之后给出语法错误：缺失。

因为它会考虑“为什么警报没有”。作为单个字符串，其余字符串作为另一个参数。

要解决您的问题，只需将代码更改为：

//using escape
 alert('why alert doesn\'t execute in polymer main file?!!');
//or
 alert("why alert doesn't execute in polymer main file?!!");

Answer 3

在

中换行代码

window.onload = function(){ 
    // your code 
};

问题解决了！

为什么javascript不在聚合物主文件中执行？

3 个答案: