Javascript 在脚本顶部使用导入时函数停止工作,即使没有尝试使用导入的内容
Javascript functions stop working when using import at top of script, even without trying to use what's imported
我正在尝试使用 lit 而不是基本的 js 重新创建我的一个简单程序,但是添加导入语句似乎会破坏每个功能。
在我的 package.json 中单独使用 "type": "module"
似乎一切正常,但第二次我在我的脚本 link 中将 type="text/javascript"
更改为 type="module"
在我的 html 内,或者当我添加:
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
到我的 app.js 的顶部,或者甚至两者结合,我的 none 功能似乎不再起作用。
我尝试按照此线程中的建议更改函数的范围:Functions not working when ```type="module"``` or import,但这似乎没有任何效果。
这是一个这样的函数的例子:
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;
}
有什么我想念的吗?添加导入语句后如何让我的函数继续工作?
编辑:添加我的 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>
我正在尝试使用 lit 而不是基本的 js 重新创建我的一个简单程序,但是添加导入语句似乎会破坏每个功能。
在我的 package.json 中单独使用 "type": "module"
似乎一切正常,但第二次我在我的脚本 link 中将 type="text/javascript"
更改为 type="module"
在我的 html 内,或者当我添加:
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
到我的 app.js 的顶部,或者甚至两者结合,我的 none 功能似乎不再起作用。
我尝试按照此线程中的建议更改函数的范围:Functions not working when ```type="module"``` or import,但这似乎没有任何效果。
这是一个这样的函数的例子:
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;
}
有什么我想念的吗?添加导入语句后如何让我的函数继续工作?
编辑:添加我的 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>