Question

我正在使用Jekyll通过github-pages工作的网站。我正在编写一些简单的javascripts来创建一个随机数生成器，但它们无法更改页面上的值。

该页面包含以下内容：

/resume/index.html

<form>
<input type="text" name="#d" maxlength="3" value="1" />
<div class="dice_text">d</div>
<input type="text" name="d#" maxlength="2" value="4" />
<button type="button" name="rollme" onclick="roll()">roll</button>
<div class="dice_text"> : </div>
<input type="text" id="dieresult" readonly />
</form>

/resume/roll.js

document.getElementById('dieresult').setAttribute('value', '3') ;

function roll() {
  alert("rolled!");
}

由于某种原因，我不明白，当你按下按钮时，roll（）函数将被调用并发出警报，因此该网站似乎正在合并javascript文件，但它拒绝改变页面显示只读字段中的数字。

我的代表在github上线，问题网站网址为here。

已编辑：更正'id'与'姓名'问题，但页面仍然不会更改'dieresult'的价值

Answer 1

您错误地将name属性与id attribute

混淆了

当您尝试使用document.getElementById抓取该元素时，它将返回null。

使id dieresult 应该解决这个问题。我强烈建议您熟悉浏览器的内置JavaScript控制台 - 您可以很快发现这样的小错误！

Answer 2

您的<input type="text" name="dieresult" readonly />没有ID，这就是您在document.getElementById('dieresult').setAttribute('value', '3') ;

行中寻找的内容

如果您将<input type="text" name="dieresult" readonly />更改为<input type="text" id="dieresult" readonly />并将其放在roll（）函数中，它应该可以正常工作

Answer 3

您的输入有一个名称，但您可以通过ID查询，将其更改为：

<input type="text" name="dieresult" id="dieresult" readonly />

Answer 4

你有一个关于jquery的404。通过在roll文件夹中放置一个jquery来解决此问题。

而且，你可以尝试在每个人都在船上执行你的代码

$( document ).ready(function() {
  document.getElementById('dieresult').setAttribute('value', '3') ;
});

请参阅http://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready

页面不会从JavaScript更改

4 个答案: