Html LWC1079预期根标记为模板，找到元
我在网上找到了这段开源代码，我一直在尝试将其转换为LWC。代码采用HTML、CSS和JS格式。我在VisualStudio中工作，我使用的salesforce扩展包不接受HTML，它需要标记，但我以前从未使用过模板标记。这也给了我一个错误，元标记是不允许的，我不知道这个错误是什么。有人能帮忙吗？错误在第3行Html LWC1079预期根标记为模板，找到元,html,visual-studio,salesforce,lwc,Html,Visual Studio,Salesforce,Lwc,我在网上找到了这段开源代码，我一直在尝试将其转换为LWC。代码采用HTML、CSS和JS格式。我在VisualStudio中工作，我使用的salesforce扩展包不接受HTML，它需要标记，但我以前从未使用过模板标记。这也给了我一个错误，元标记是不允许的，我不知道这个错误是什么。有人能帮忙吗？错误在第3行 <html lang="en"> <head> <meta charset="UTF-8" /&
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Maths Game</title>
<link rel="stylesheet" href="mathGame.css" />
</head>
<body>
<main>
<div id="container">
<p id="message" class="structure-elements"></p>
<aside id="score" class="structure-elements">Score: <span>00</span></aside>
<div id="calculation">
<section id="question" class="structure-elements"></section>
<p id="instruction" class="structure-elements">Click on the correct answer</p>
<ul id="choices" class="structure-elements">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button id="start-reset" class="structure-elements">Start Game</button>
<aside id="time-remaining" class="structure-elements">Time remaining: <span>60</span> sec</aside>
</div>
<div id="game-over" class="structure-elements">
<p>Game over!</p>
<p>Your score is <span>00</span>.</p>
</div>
</main>
<script src="mathGame.js"></script>
</body>
</html>
数学游戏
分数：00
点击正确答案
开始比赛
剩余时间：60秒
游戏结束
你的分数是00
var Counter = {
PlayingState: null,
IsStoped: true,
Score: 0,
TimeRemaining: 0,
FirstNumber: 0,
SecondNumber: 0,
CorrectAnswer: 0,
CorrectPosition: 0,
WrongAnswer: 0,
AddContentToElement: function(selector, content)
{
document.querySelector(selector).innerHTML = content;
},
ChangeStyle: function(selector, property, value)
{
document.querySelector(selector).setAttribute(property, value);
},
Initialize: function(timeRemaining)
{
this.TimeRemaining = timeRemaining;
},
GenerateRandomNumber: function(multiplier)
{
return Math.round( Math.random() * multiplier ) + 1;
},
Refresh: function(selector, data)
{
document.querySelector(selector).innerText = (data < 10 ? "0" : "") + data;
},
LoopThroughElements: function()
{
var answers = [this.CorrectAnswer];
for (var index = 1; index < 5; index++)
{
this.ChangeStyle("ul#choices > li:nth-of-type(" + index + ")", "style", "height:auto;");
if (index !== this.CorrectPosition)
{
do
{
this.WrongAnswer = this.GenerateRandomNumber(9) * this.GenerateRandomNumber(9);
} while ( answers.indexOf(this.WrongAnswer) > -1 );
this.AddContentToElement( "ul#choices > li:nth-of-type(" + index + ")", this.WrongAnswer );
answers.push(this.WrongAnswer);
}
}
},
Launch: function()
{
this.IsStoped = false;
this.Action();
this.ChangeStyle("aside#time-remaining", "style", "visibility:visible;");
this.ChangeStyle("#game-over", "style", "display:none;");
this.ChangeStyle("ul#choices", "style", "pointer-events:initial; opacity:1;");
this.ChangeStyle("button#start-reset", "style", "visibility:hidden;");
this.AddContentToElement("button#start-reset", "Reset Game");
this.Refresh("aside#time-remaining > span", this.TimeRemaining);
this.GenerateQuestionAndAnswers();
},
GenerateQuestionAndAnswers: function()
{
this.FirstNumber = this.GenerateRandomNumber(9);
this.SecondNumber = this.GenerateRandomNumber(9);
this.CorrectAnswer = this.FirstNumber * this.SecondNumber;
this.CorrectPosition = this.GenerateRandomNumber(3);
this.ChangeStyle("section#question", "style", "height:auto;");
this.AddContentToElement("section#question", this.FirstNumber + "x" + this.SecondNumber);
this.AddContentToElement( "ul#choices > li:nth-of-type(" + this.CorrectPosition + ")", this.CorrectAnswer );
this.LoopThroughElements();
},
Action: function()
{
Counter.PlayingState = setInterval( function()
{
Counter.TimeRemaining--;
if (Counter.TimeRemaining <= 50)
{
Counter.ChangeStyle("button#start-reset", "style", "visibility:visible;");
}
if (Counter.TimeRemaining < 1)
{
Counter.Stop();
}
else
{
Counter.Refresh("aside#time-remaining > span", Counter.TimeRemaining);
}
}, 1000 );
},
EventListener: function(event)
{
if ( Number(event.currentTarget.innerText) === Number(Counter.CorrectAnswer) )
{
Counter.Score++;
Counter.Refresh("aside#score > span", Counter.Score);
Counter.GenerateQuestionAndAnswers();
Counter.ChangeStyle("p#message", "style", "visibility:visible; background-color:#23A230;");
Counter.AddContentToElement("p#message", "Correct");
}
else
{
if (Counter.Score >= 1)
{
Counter.Score -= 0.5;
Counter.Refresh("aside#score > span", Counter.Score);
}
Counter.ChangeStyle("p#message", "style", "visibility:visible; background-color:#DE401A;");
Counter.AddContentToElement("p#message", "Try again");
}
setTimeout( function()
{
Counter.ChangeStyle("p#message", "style", "visibility:hidden;");
}, 1000 );
},
CheckClickOnRightAnswer: function()
{
for (var index = 1; index < 5; index++)
{
document.querySelector("ul#choices > li:nth-of-type(" + index + ")").removeEventListener("click", this.EventListener, false);
document.querySelector("ul#choices > li:nth-of-type(" + index + ")").addEventListener("click", this.EventListener);
}
},
Stop: function()
{
this.IsStoped = true;
clearInterval(this.PlayingState);
this.ChangeStyle("ul#choices", "style", "pointer-events:none; opacity:0.4;");
this.ChangeStyle("aside#time-remaining", "style", "visibility:hidden;");
this.ChangeStyle("div#game-over", "style", "display:block;");
this.AddContentToElement("button#start-reset", "Start Game");
this.AddContentToElement( "div#game-over > p:last-of-type > span", (this.Score !== "00" && this.Score < 10 ? "0" : "") + this.Score );
this.AddContentToElement("aside#score > span", this.Score = "00");
}
};
/*************************************************************************************************/
/* ************************************** CODE PRINCIPAL *************************************** */
/*************************************************************************************************/
document.addEventListener('DOMContentLoaded', function()
{
document.getElementById("start-reset").addEventListener("click", function()
{
Counter.Initialize(60);
Counter.IsStoped ? Counter.Launch() : Counter.Stop();
Counter.CheckClickOnRightAnswer();
});
});
var计数器={
播放状态：null，
是的，
分数：0，
剩余时间：0，
第一个数字：0，
第二个号码：0，
回答:0,，
位置：0，
错误答案：0，
AddContentToElement:函数（选择器、内容）
{
document.querySelector（selector）.innerHTML=content；
},
ChangeStyle:函数（选择器、属性、值）
{
document.querySelector（选择器）.setAttribute（属性、值）；
},
初始化：函数（剩余时间）
{
this.TimeRemaining=TimeRemaining；
},
GeneratorDomainNumber:函数（乘法器）
{
返回Math.round（Math.random（）*乘数）+1；
},
刷新：功能（选择器、数据）
{
document.querySelector（选择器）.innerText=（数据<10？：“）+数据；
},
LoopThroughElements:function（）
{
var answers=[this.CorrectAnswer]；
对于（var指数=1；指数<5；指数++）
{
此.ChangeStyle（“ul#choices>li:n类型（“+index+”）”）、“样式”、“高度：自动；”；
如果（索引！==此.CorrectPosition）
{
做
{
this.ErrorAnswer=this.GeneraterDomainNumber（9）*this.GeneraterDomainNumber（9）；
}while（answers.indexOf（this.errowresponse）>-1）；
this.AddContentToElement（“ul#choices>li:n类型（“+index+”），this.error）；
答案。推（这个错误答案）；
}
}
},
启动：函数（）
{
this.IsStoped=false；
这个动作（）；
这个.ChangeStyle（“搁置#剩余时间”、“样式”、“可见性：可见；”）；
这个.ChangeStyle（“#游戏结束”、“样式”、“显示：无；”）；
this.ChangeStyle（“ul#choices”、“style”、“指针事件：初始；不透明度：1；”）；
此.ChangeStyle（“按钮#开始重置”、“样式”、“可见性：隐藏；”）；
这个.AddContentToElement（“按钮#开始重置”，“重置游戏”）；
this.Refresh（“aside#time remaining>span”，this.TimeRemaining）；
此.generatequestionandswers（）；
},
GenerateQuestionAndAnswers:function（）
{
this.FirstNumber=this.GenerateRandomNumber（9）；
this.SecondNumber=this.GenerateRandomNumber（9）；
this.CorrectAnswer=this.FirstNumber*this.SecondNumber；
this.CorrectPosition=this.GenerateRandomNumber（3）；
这个.ChangeStyle（“部分#问题”，“样式”，“高度：自动；”）；
this.AddContentToElement（“部分#问题”，this.FirstNumber+“x”+this.SecondNumber）；
this.AddContentToElement（“ul#choices>li:n类型（“+this.CorrectPosition+”），this.CorrectAnswer）；
这个。LoopThroughElements（）；
},
行动：功能（）
{
Counter.PlayingState=setInterval（函数（）
{
计数器。剩余时间--；
如果（Counter.TimeRemaining=1）
{
计数器得分-=0.5；
Counter.Refresh（“旁白#分数>跨度”，Counter.score）；
}
ChangeStyle（“p#消息”、“样式”、“可见性：可见；背景色：#DE401A；”）；
Counter.AddContentToElement（“p#message”，“重试”）；
}
setTimeout（函数（）
{
ChangeStyle（“p#message”、“style”、“visibility:hidden；”）；
}, 1000 );
},
选中ClickOnRight回答：函数（）
{
对于（var指数=1；指数<5；指数++）
{
document.querySelector（“ul#choices>li:n类型（“+index+”））。removeEventListener（“单击”，this.EventListener，false）；
document.querySelector（“ul#choices>li:n类型（“+index+”））。addEventListener（“单击”，this.EventListener）；
}
},
停止：函数（）
{
this.IsStoped=true；
clearInterval（此.PlayingState）；
this.ChangeStyle（“ul#choices”、“style”、“指针事件：无；不透明度：0.4；”）；
this.ChangeStyle（“搁置#剩余时间”、“样式”、“可见性：隐藏；”）；
这个.ChangeStyle（“div#game over”、“style”、“display:block；”）；
这个.AddContentToElement（“按钮#开始重置”，“开始游戏”）；
this.AddContentToElement（“div#game over>p:type的最后一个>span”，（this.Score！==“00”&&this.Score<10？：”）+this.Score）；
this.AddContentToElement（“aside#score>span”，this.score=“00”）；
}
};
/*************************************************************************************************/
/*******************************************************************原则准则
<template>
<div>
<lightning-layout multiple-rows="true">
<lightning-layout-item size="6"><span class={messageStyle}>{message}</span></lightning-layout-item>
<lightning-layout-item size="6">
Score:
<lightning-formatted-number value={score} minimum-integer-digits="2"></lightning-formatted-number>
</lightning-layout-item>
<template if:false={isStopped}>
<lightning-layout-item size="12"><span class="question">{question}</span></lightning-layout-item>
<lightning-layout-item size="12">Click on the correct answer</lightning-layout-item>
<template for:each={answers} for:item="a">
<lightning-layout-item key={a.value} size="3">
<lightning-button label={a.value} value={a.value} variant="neutral" onclick={handleAnswerClick}></lightning-button>
</lightning-layout-item>
</template>
</template>
<lightning-layout-item size="6">
<template if:true={isButtonVisible}>
<lightning-button label={buttonLabel} variant={buttonVariant} onclick={handleButtonClick}></lightning-button>
</template>
</lightning-layout-item>
<lightning-layout-item size="6">
Time remaining:
<lightning-formatted-number value={timeRemaining} minimum-integer-digits="2"></lightning-formatted-number>
</lightning-layout-item>
</lightning-layout>
</div>
</template>
import { track, LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
export default class Stack63257378 extends LightningElement {
buttonLabel = 'Start Game';
buttonVariant = 'success';
isButtonVisible = true;
message;
messageStyle;
firstNumber;
secondNumber;
@track answers = [];
timeRemaining;
score;
isStopped = true;
handleButtonClick(event){
this.isStopped ? this.launch() : this.stop();
}
launch(){
this.timeRemaining = 15; // 60
this.isStopped = this.isButtonVisible = false;
this.score = 0;
let interval = setInterval(function (){
--this.timeRemaining;
if(this.timeRemaining <= 10){ // 50
this.isButtonVisible = true;
this.buttonLabel = 'Stop Game';
this.buttonVariant = 'destructive';
}
if(this.timeRemaining < 1){
clearInterval(interval);
this.stop();
}
}.bind(this),1000);
this.generateQuestion();
}
handleAnswerClick(event){
if(this.correctAnswer === event.target.value){
++this.score;
this.generateQuestion();
this.message = 'Correct';
this.messageStyle = 'good';
} else {
if(this.score >= 1) {
this.score -= 0.5;
}
this.message = 'Try again';
this.messageStyle = 'bad';
}
}
stop(){
this.answers = [];
this.isStopped = true;
this.buttonLabel = 'Start Game';
this.buttonVariant = 'success';
this.message = this.messageStyle = null;
const event = new ShowToastEvent({
title: 'Game over!',
message: `Your score is ${this.score}`,
});
this.dispatchEvent(event);
}
generateQuestion(){
this.firstNumber = this.getRandomNumber(9);
this.secondNumber = this.getRandomNumber(9);
this.correctAnswer = this.firstNumber * this.secondNumber;
this.answers = [];
let correctPosition = this.getRandomNumber(3);
for(let i = 0; i < 4; ++i){
let obj = {"i" : i, "value" : i === correctPosition ? this.correctAnswer : this.getRandomNumber(9) * this.getRandomNumber(9)};
this.answers.push(obj);
}
}
getRandomNumber(range){
return Math.round( Math.random() * range ) + 1
}
get question(){
return this.isStopped ? '' : `${this.firstNumber} x ${this.secondNumber}`;
}
}
.good {
background-color:#23A230;
}
.bad {
background-color:#DE401A;
}
.question {
font-size: 24px;
}
button {
width: 100%;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Math game</masterLabel>
<description>https://stackoverflow.com/q/63257378/313628</description>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>