javascript - JavaFX:当我们构建 html 并将链接放在 header 中时，我们的 javascript 文件不起作用。为什么是这样？

Question

用户应该能够更改值并且数字应该更改。在这种情况下有什么问题？也可以链接 html 中的 JS 文件以在 JavaFX webView 中运行吗？

var numbersToChange;
var multiplier;

function pageLoad() {
  var inputBox = Number(document.getElementById("servingInputBox").value);
  multiplier = new Array();
  numbersToChange = document.getElementsByClassName("numberToChange");

  for (i = 0; i < numbersToChange.length; i++) {
    multiplier[i] = Number(numbersToChange[i].innerHTML) / inputBox;
  }
}

function changeNumbers() {
  var inputboxValue = Number(document.getElementById("servingInputBox").value);

  for (i = 0; i < numbersToChange.length; i++) {
    numbersToChange[i].innerHTML = (Math.trunc((inputboxValue * multiplier[i]) * 10)) / 10;
  }
}

function increase() {
  var inputBox = Number(document.getElementById("servingInputBox").value);

  document.getElementById("servingInputBox").value = (Math.trunc(inputBox * 10) + 10) / 10;

  changeNumbers();
}

function decrease() {
  var inputBox = Number(document.getElementById("servingInputBox").value);
  var newNumber = (Math.trunc(inputBox * 10) - 10) / 10;

  if (newNumber >= 0) {
    document.getElementById("servingInputBox").value = newNumber;
    changeNumbers();
  }
}

function enter(e) {
  if (e.keyCode == 13) {
    var inputBox = Number(document.getElementById("servingInputBox").value);

    document.getElementById("servingInputBox").value = Math.trunc(inputBox * 10) / 10;

    changeNumbers();
  }
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Black Regular'), local('ArchivoBlack-Regular'), url(http://fonts.gstatic.com/s/archivoblack/v4/WoAoVT7K3k7hHfxKbvB6B6GwZwAVuVwqynDPq0VH9Ho.woff2) format('woff2'), url(http://fonts.gstatic.com/s/archivoblack/v4/WoAoVT7K3k7hHfxKbvB6B0BTuPGxyeV-VBVV8KqqzrI.woff) format('woff');
}


html,body{
	margin:0 0 1px;
	padding:0
}

input,textarea{
	background-color:white
}

html{
	overflow-y:scroll;
	height:100%
}

body{
	font-family:'Open Sans',sans-serif;
	font-size:11px;
	color:#202020;
	line-height:14px;
	position:relative;
	padding-bottom:50px;
	background-repeat:repeat-x;
	background-position:0 -298px;
	background-color:white
}

.nutritionLabel{
	font-size:115% !important
}

@import url("//fonts.googleapis.com/css?family=Archivo+Black");

.nutritionLabel input.unitQuantityBox.ui-shadow-inset{
	box-shadow:none
}

.nutritionLabel{
	font-size:90%;
	margin-bottom:1.1em;
	padding:.68em;
	color:#333;
	font-family:Arial,Helvetica,sans-serif;
	border:2px solid #000;
	line-height:normal
}

.nutritionLabel .title{
	line-height:.83em;
	font-size:2.7em;
	padding-bottom:4px;
	font-family:'Archivo Black';
	white-space:nowrap;
	letter-spacing:-2px
}

.nutritionLabel .m{
	font-size:.9em
}

.nutritionLabel .serving{
	font-size:1.1em;
	line-height:1.28em;
	padding-bottom:2px
}

.nutritionLabel .name{
	font-size:1.1em;
	line-height:1.3em
}

.nutritionLabel .name.inline{
	padding-top:.2em;
	padding-top:.25em \9
}

.nutritionLabel .dvCalorieDiet,.nutritionLabel #calcDisclaimer{
	font-size:.9em
}

.nutritionLabel .line{
	border-top:1px solid #333;
	padding:1px 0
}

.nutritionLabel .line.last{
	border-bottom:1px solid #333
}

.nutritionLabel .line.indent{
	margin-left:15px
}

.nutritionLabel .dv{
	float:right
}

.nutritionLabel .dv:before{
	content:'\0000a0'
}

.nutritionLabel .bar1{
	height:10px;
	line-height:0;
	font-size:1px;
	background:#333
}

.nutritionLabel .bar2{
	height:5px;
	line-height:0;
	font-size:1px;
	background:#333
}

.nutritionLabel .dvCalorieDiet{
	color:#777
}

.nutritionLabel .calorieNote{
	padding:.60em 0 0 .70em
}

.nutritionLabel .star{
	margin-left:-7px
}

.nutritionLabel .tblCalorieDiet th{
	font-size:.7em;
	border-bottom:1px solid #333;
	text-align:left;
	color:#777
}

.nutritionLabel .tblCalorieDiet{
	width:100%
}

.nutritionLabel .tblCalorieDiet td{
	padding:0;
	line-height:normal;
	font-size:.7em;
	color:#777
}

.nutritionLabel .ar{
	text-align:right
}

.nutritionLabel .fr{
	float:right
}

.nutritionLabel .fl{
	float:left
}

.nutritionLabel #calcDisclaimer{
	color:#777
}


.nutritionLabel .spaceAbove{
	height:10px
}

.nutritionLabel .setter{
	width:12px;
	padding:3px 0 0 0;
	position:absolute;
	left:0;
	top:0;
	z-index:100
}

.nutritionLabel .setter a{
	display:block;
	width:9px;
	height:7px;
	font-size:1px;
	line-height:0em
}

.nutritionLabel a.unitQuantityUp{
	padding-bottom:1px;
	background:transparent url("up.png") left top no-repeat;
	z-index:9999
}

.nutritionLabel a.unitQuantityDown{
	padding-top:1px;
	background:transparent url("down.png") left bottom no-repeat;
	z-index:9999
}

.nutritionLabel input.unitQuantityBox{
	width:25px;
	height:22px;
	padding:2px;
	font-size:.9em !important;
	margin-left:15px;
	margin-bottom:0;
	line-height:15px \9
}

.nutritionLabel input.unitQuantityBox.arrowsAreHidden{
	margin-left:0
}

.nutritionLabel .rel{
	position:relative
}

.nutritionLabel .servingSizeField{
	float:left;
	margin-top:.2em;
	margin-bottom:.2em;
	margin-right:.4em
}

.nutritionLabel .servingUnit{
	float:left;
	padding:0;
	margin-top:.3em;
	margin-bottom:.2em
}

.nutritionLabel .servingWeightGrams{
	padding:0 0 0 .3em;
	margin-top:.3em;
	margin-bottom:.2em
}

.nutritionLabel .servingSizeText{
	padding-right:.3em;
	margin-top:.3em
}

.nutritionLabel .servingUnitQuantity{
	margin-top:.3em;
	padding-right:.3em
}

.cf:before,.cf:after{
	content:" ";
	display:table
}

.cf:after{
	clear:both
}

.cf{
	*zoom:1
}

.nutritionLabel .servingSizeText{
	display:inline-block
}

.nutritionLabel .line{
	line-height:normal;
}

.nutritionLabel .title{
	padding-bottom:6px;
}

<html>

<head>
</head>

<body onload="pageLoad()">
  <div class="nutritionLabel" style="width: 283px;">
    <div class="title">Nutrition Facts</div>
    <div class="name">Ice Cream</div>
    <div class="serving">
      <div class="cf">
        <div class="servingSizeText fl">Serving Size:</div>
        <div class="rel servingSizeField fl">
          <div class="setter">
            <a href="javascript:increase()" class="unitQuantityUp" rel="nofollow"></a>
            <a href="javascript:decrease()" class="unitQuantityDown" rel="nofollow"></a>
          </div>
          <input value="1" id="servingInputBox" class="unitQuantityBox" type="text" onkeypress="enter(event)">
        </div>
        <div class="servingUnit fl unitHasTextbox">pizza</div>
        <div class="servingWeightGrams fl gramsHasTextbox">(853g)</div>
      </div>
    </div>
    <div class="bar1"></div>
    <div class="line m"><b>Amount Per Serving</b>
    </div>
    <div class="line">
      <div class="fr">Calories from Fat <span class="numberToChange">740</span>
      </div>
      <div><b>Calories</b>  <span class="numberToChange">2270</span>
      </div>
    </div>
    <div class="bar2"></div>
    <div class="line ar"><b>% Daily Value<sup>*</sup></b>
    </div>
    <div class="line">
      <div class="dv"><b><span class="numberToChange">128</span></b>%</div><b>Total fat</b><span class="numberToChange"> 83</span>g</div>
    <div class="line indent">
      <div class="dv"><b><span class="numberToChange">190</span></b>%</div>Saturated Fat<span class="numberToChange"> 83</span>g</div>
    <div class="dvCalorieDiet line">
      <div class="calorieNote"><span class="star">*</span>Percent Daily Values are based on a 2000 calorie diet.</div>
    </div>
  </div>
</body>

</html>

如果您对这个问题有任何了解，请提供帮助。

Answer 1

请在头部包含 javascript 文件。我想 CSS 也不会加载。头部结构如下。

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>ABC</title>
<link rel="stylesheet" href="style/app.css"/>
<script src="js/app.js"></script></head>

此外，与 HTML 文件的路径平行，为“style”和“js”创建文件夹，并将 js 和 css 文件插入名为“app.css”和“app.js”的文件夹中这应该可以完成您的工作。