如何从HTML中的一个按钮运行整个Javascript页面?

How Do You Run the ENTIRE Javascript Page From An Button In HTML?

本文关键字：运行 按钮 一个 Javascript 页面 HTML      更新时间：2023-09-26

我一直在尝试使我所有的Javascript页面代码从JSBin自动工作时点击一个按钮。问题包括无法运行代码，因为它说我的脚本中有多个变量不能一起工作，并且无法将其全部放入HTML中，因为console.log不起作用。我尝试了几个不同的想法，但遗憾的是，我不能做正确的。

My Code Is:

var name = prompt('So what is your name?');
var confirmName = confirm('So your name is ' + UCFL(name) + '?');
function UCFL(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
if (confirmName === true) {
var start = confirm('Good. Lets start the roleplay, Sir ' + UCFL(name) + '. Are you  
ready?');
}
if (confirmName === false) {
var name = prompt('Than what is your name?');
var confirmNamed = confirm('So your name is ' + UCFL(name) + '?');
}
if (confirmNamed === true) {
var start = confirm('Good. Lets start the roleplay, Sir ' + UCFL(name) + '. Are you    
ready?');
}
if (confirmNamed === false) {
var name = prompt('Than what is your name?');
var confirmName = confirm('So your name is ' + UCFL(name) + '?');
if (confirmName === true) {
var start = confirm('Good. Lets start the roleplay, Sir ' + UCFL(name) + '. Are you
ready?');
}
if (confirmName === false) {
alert('Oh, guess what? I do not even fucking care what your name is anymore. Lets just 
start..');
var start = confirm('Are you ready?');
}
}
if (start === true) {
var x = console.log(Math.floor(Math.random() * 5));
if (x === 1) {
    alert('You are an dwarf in a time of great  disease.');
    alert('');
}
}

我想让你修改的是:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form>
<input type="button" value="Start The Game" onclick="" />
</form>
</body>
</html>

我在JSBin上创建了一个条目，建议对您现在拥有的内容进行许多改进:

http://jsbin.com/epurul/3/edit

访问条目以自己测试代码。为方便起见，以下是内容:

HTML: 

<body>
  <button onclick="playGame()">Play Game</button>  
</body>

和JavaScript: 

// Expose playGame as a top-level function so that it can be accessed in the
// onclick handler for the 'Play Game' button in your HTML.
window.playGame = function() {
  // I would generally recommend defining your functions before you use them.
  // (This is just a matter of taste, though.)
  function UCFL(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
  }
  // Rather than capitalize name everywhere it is used, just do it once
  // and then use the result everywhere else.
  function getName(message) {
    return UCFL(prompt(message));
  }
  var name = getName('So what is your name?');
  // Don't repeat yourself:
  // If you're writing the same code in multiple places, try consolidating it
  // into one place.
  var nameAttempts = 0;
  while (!confirm('So your name is ' + name + '?') && ++nameAttempts < 3) {
    // Don't use 'var' again as your name variable is already declared.
    name = getName('Then what is your name?');
  }
  if (nameAttempts < 3) {
    alert('Good. Lets start the roleplay, Sir ' + name + '.');
  } else {
    alert("Oh, guess what? I do not even fucking care what your name is anymore. Let's just start...");
  }
};

将代码放入函数中，例如:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
    function runGame() {
        // put your js code here
    }
</script>
</head>
<body>
<form>
<input type="button" value="Start The Game" onclick="runGame();" />
</form>
</body>
</html>
这也是一个好主意，复制你的js代码到另一个文件，并导入使用脚本标签，例如: 
<script src="path/to/file.js"></script>
相关文章：