JavaScript 在任何浏览器中都没有 运行 & 已启用 - 已替换 document.write 用于警报,但仍然无法正常工作

JavaScript doesn't run in any browser & is enabled - Have replaced document.write for alert and still wouldn't work

我正在尝试这个看似简单的代码片段,其中唯一的变量 'numero' 必须 return 一个随机数,就好像它是一个骰子一样,所以范围必须从 1 到 6 并且它可以工作但是它只有 运行s 当我将整个 JavaScript 代码插入 HTML 像这样的 script 时:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>JavaScript Dice</title>
  <script type="text/javascript">
    var numero = Math.random();
    numero = numero * 6;
    numero++;
    numero = Math.floor(numero);
    document.write("Random dice number is: " + numero + "<br><br>")
  </script>
</head>

<body>

  <p>This is the main</p>

</body>

</html>

尽管如此,我得到了很多我不能使用的东西 document.write();,因为这是一种不好的做法(它使 运行 变慢或其他什么?我仍在阅读我的方法)我已经尝试应用我在其他问题中看到的解决方案,但它们非常具体,我觉得我会搞砸了,因为很难用这些特定的元素来实现。那么,在这种情况下,我可以使用什么来代替 document.write

我的大问题是为什么下面的代码不起作用?

// The Math Object
var numero = Math.random();
numero = numero * 6;
numero = Math.floor(numero);
numero++;
document.write("Random number: " + numero + "<br><br>");
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>JavaScript dice</title>
  <script src="MathObject.js" language="javascript" type="text/javascript">
  </script>
</head>

<body>
  <p>This is the main </p>
</body>

</html>

这在任何浏览器中都不起作用 - 我检查了是否启用了 JavaScript,我重新启动了设置,我尝试了 Chrome、Edge、Internet Explorer,它只在 DreamWeaver CC 2017 本身代码的 Split/Live 视图中工作,这没有用,但我知道代码工作 其中 returns:This 是主要的。

我什至用警告消息替换了 document.write 只是为了对其进行更多测试,但它也不起作用,除非我在 DreamWeaver 或此处的代码编辑器中 运行 它。

// The Math Object
var numero = Math.random();
numero = numero * 6;
numero = Math.floor(numero);
numero++;
alert("Random number: " + numero);

我疯狂地试图寻求解决方案,但决定在 HTML 中实施所有 JavaScript。必须有解决方案或更合适的方法,因为我需要将其打印在文档上。

澄清一下: - JavaScript 仅当它像脚本一样完全位于 HTML 内时才有效 - 我不想打印很多数字或循环。只有一个。 - 如何在文档上打印 JavaScript 中的内容,而不必在 HTML 上写下所有内容 请问有什么帮助吗?提前致谢 ;)

这听起来像是关于 文件引用 的问题。如果您检查 F12 Developer Tools,它可能会告诉您找不到文件 MathObject.js.

在您的行 <script src="MathObject.js" language="javascript" type="text/javascript"> 中,您声明 MathObject.js 与您将其包含在其中的页面 位于同一文件夹 中。

您可能只是忘记将它包含在项目中,但更有可能是您错误地引用了它。根据您的 MathObject.js 文件实际所在的位置,您可能需要更改此引用。

  • 您可以使用 相对 link ../MathObject.js 向上导航一个文件夹。
  • 您可以使用 root-relative link /MathObject.js 始终引用根。
  • 您可以使用 绝对 link https://example.com/MathObject.js 加载托管版本。

要进一步阅读相对和绝对 URL,我建议查看此 Coffee Cup article

希望这对您有所帮助! :)

希望您能从中学到一些东西:

//<![CDATA[
// external.js
var pre = onload, doc, bod, C, E, rollEm; // for use on other loads
onload = function(){
if(pre)pre(); // change var pre if using technique on other pages
doc = document; bod = doc.body;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
var out = E('out'), dice = E('dice'), dv;
function rollEm(dice, sides, outputRowElement){
  outputRowElement.innerHTML = '';
  for(var i=0,td,l=dice; i<l; i++){
    td = C('td'); td.innerHTML = Math.floor(Math.random()*sides)+1;
    outputRowElement.appendChild(td);
  }
}
E('roll').onclick = function(){
  dv = dice.value;
  if(!dv.match(/^[0-9]+$/)){
    dv = dice.value = 1;
  }
  rollEm(dv, 6, out);
}
}
//]]>
/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:940px; padding:20px; margin:0 auto;
}
label{
  margin-right:4px;
}
#dice{
  width:40px;
}
td{
  padding:5px; border:1px solid #000;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Lame Dice</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
  <body>
    <div class='main'>
      <label for='dice'>Dice</label><input id='dice' name='dice' type='text' value='1' /><input id='roll' name='roll' type='button' value='Roll &apos;em' />
      <table><tbody><tr id='out'></tr></tbody></table>
    </div>
  </body>
</html>