我试图重新创建一个简单的程序，我使用lit而不是基本的js，但添加import语句似乎打破了每个函数。
在我的包中单独使用"type": "module"似乎工作得很好。但第二我改变type="text/javascript"到type="module"在我的脚本链接在我的html，或者当我添加:
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
到我的app.js的顶部，或者甚至两者结合，我的函数似乎都不起作用了。
我尝试改变我的函数的范围，建议在这个线程:函数不工作时' ' ' type="模块" ' '或导入，但这似乎没有任何影响。
下面是这样一个函数的例子:
function initialize()
{
xWins = window.sessionStorage.getItem('xWins');
oWins = window.sessionStorage.getItem('oWins');
draws = window.sessionStorage.getItem('draws');
if(xWins == null) { xWins = 0; }
if(oWins == null) { oWins = 0; }
if(draws == null) { draws = 0; }
document.getElementById('numXWins').innerHTML = "X WINS: " +xWins;
document.getElementById('numOWins').innerHTML = "O WINS: " +oWins;
document.getElementById('numDraws').innerHTML = "DRAWS: " +draws;
}
我错过了什么吗?如何在添加import语句后保持函数工作?
编辑:为了完成我的index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="./app.js" defer></script>
<script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
</head>
<body onload="initialize();">
<h3>Tic Tac Toe</h3>
<p id="rules">Rules: One player chooses X's, the other chooses O's. Take turns drawing your symbols onto a square. The first to get three in a row wins!</p>
<table id="scoreboard">
<thead>
<tr>
<td id="numXWins">X WINS</td>
<td id="numOWins">O WINS</td>
<td id="numDraws">DRAWS</td>
</tr>
</thead>
<tbody>
<td>0</td>
<td>0</td>
<td>0</td>
</tbody>
</table>
<br>
<table id="gameboard">
<tr>
<td><input type="button" name="gamecell" value=" " class="0,0" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="0,1" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="0,2" onclick="play(this);"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="1,0" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="1,1" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="1,2" onclick="play(this);"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="2,0" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="2,1" onclick="play(this);"></td>
<td><input type="button" name="gamecell" value=" " class="2,2" onclick="play(this);"></td>
</tr>
</table>
<p id="caption" value="Current Turn: X">Current Turn: X</p>
<input type="button" id="rematch" value="Rematch?" onclick="rematch();">
</body>
</html>
你能做的最好的事情就是所有的东西都是一个元素，就像下面的代码片段一样。
<script type="module">
import {
LitElement,
} from "https://unpkg.com/lit-element/lit-element.js?module";
import {html} from "https://unpkg.com/lit/static-html.js?module";
class MyElement extends LitElement {
constructor() {
super();
}
play(e) {
console.log('play');
e.target.value = 'X';
}
rematch() {
console.log('rematch');
}
render() {
return html`
<h3>Tic Tac Toe</h3>
<p id="rules">Rules: One player chooses X's, the other chooses O's. Take turns drawing your symbols onto a square. The first to get three in a row wins!</p>
<table id="scoreboard">
<thead>
<tr>
<td id="numXWins">X WINS</td>
<td id="numOWins">O WINS</td>
<td id="numDraws">DRAWS</td>
</tr>
</thead>
<tbody>
<td>0</td>
<td>0</td>
<td>0</td>
</tbody>
</table>
<br>
<table id="gameboard">
<tr>
<td><input type="button" name="gamecell" value=" " class="0,0" @click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="0,1" @click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="0,2" @click="${this.play}"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="1,0" @click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="1,1" @click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="1,2" @click="${this.play}"></td>
</tr>
<tr>
<td><input type="button" name="gamecell" value=" " class="2,0" @click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="2,1" @click="${this.play}"></td>
<td><input type="button" name="gamecell" value=" " class="2,2" @click="${this.play}"></td>
</tr>
</table>
<p id="caption" value="Current Turn: X">Current Turn: X</p>
<input type="button" id="rematch" value="Rematch?" @click="${this.rematch}">`
}
}
customElements.define("my-element", MyElement);
</script>
<my-element></my-element>