Question

我一直在尝试写一台小的石头剪刀纸机，但是HTML中的脚本标签似乎有问题。

当我将脚本放在脚本标签之间时，它可以工作，但有人告诉我这样做会造成混淆。`

var selector = document.getElementById('selectors');
var title = document.getElementById('title');

var userInput = '';

var choices = ['rock', 'paper', 'scissors'];
var computerChoice = '';

var outcome = '';

function getUserInput() {
  if (class = 'rock') {
    userInput = 'rock';
    return userInput;
  } else if (class = 'paper') {
    userInput = 'paper';
    return userInput;
  } else if (class = 'scissors') {
    userInput = 'scissors';
    return userInput;
  }
}

function change() {
  document.getElementById("title").innerHTML = 'it has worked'
}

<head>
  <title>scissors, paper, rock engine</title>
  <script type="text/javascript" src="./rockPaperScissors.js"></script>
</head>

强文本`

Answer 1

如果所有文件都在同一文件夹中，请尝试删除点和斜杠

<script type="text/javascript" src="rockPaperScissors.js"></script>

Answer 2

如果脚本位于上一级，则在/之前添加两个点。

<script type="text/javascript" src="../rockPaperScissors.js">

Answer 3

我意识到由于getUserInput函数的作用

现在正在工作

Answer 4

在getUserInput函数中，您有两个错误，首先，您不能使用该类，因为它是保留关键字。其次，希望您尝试将类名与字符串进行比较，您需要放置===或！==进行检查。

要检查文件是否成功加载... 右键单击您的站点，然后选择“检查”。它将打开chrome开发人员工具的新窗口。在那个网络和刷新（F5）。它显示了该网页所需的每个文档，图像和支持文件。如果您单击任何文件，它会提供有关标题的详细信息，预览，响应和定时的详细信息。

Answer 5

您好，首先请在您的代码中解决此错误，即

function getUserInput() {
if (class == 'rock') {           //here = should be ==
 userInput = 'rock';
 return userInput;
} else if (class == 'paper') {   //here = should be ==
 userInput = 'paper';
 return userInput;
} else if (class == 'scissors') {    //here = should be ==
 userInput = 'scissors';
 return userInput;
}
}

在比较条件中的值时，对于脚本标记，只需在src中指定，如果在同一目录中有文件，则只需使用文件名即可，例如：

<script type="text/javascript" src="file.js"></script>

Answer 6

只想举例说明您的代码可能最终看起来像什么。

var doc, bod, M, I, S, Q, aC, rC, tC; // for use on other loads
addEventListener('load', function(){ // load wrapper
doc = document; bod = doc.body;
M = function(tag){ // make element
  return doc.createElement(tag);
}
I = function(id){ // document.getElementById(id)
  return doc.getElementById(id);
}
S = function(selector, within){ // .querySelector
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){ // .querySelectorAll
  var w = within || doc;
  return w.querySelectorAll(selector);
}
aC = function(element, className, text){ // addClass
  var s = element.className.split(/\s+/), n = s.indexOf(className);
  if(n === -1){
    s.push(className); element.className = s.join(' ');
  }
  if(text !== undefined){
    if(element.value === undefined){
      element.innerHTML = text;
    }
    else{
      element.value = text;
    }
  }
  return function(className, text){
    return aC(element, className, text);
  }
}
rC = function(element, className, text){ // remove class
  var s = element.className.split(/\s+/), n = s.indexOf(className);
  if(n !== -1){
    s.splice(n, 1); element.className = s.join(' ');
  }
  if(text !== undefined){
    if(typeof element.innerHTML === 'undefined'){
      element.value = text;
    }
    else{
      element.innerHTML = text;
    }
  }
  return function(className, text){
    return rC(element, className, text);
  }
}
tC = function(element, className, onText, offText){ // toggle class
  var s = element.className.split(/\s+/), n = s.indexOf(className);
  if(n === -1){
    s.push(className); element.className = s.join(' ');
    if(onText !== undefined){
      if(element.value === undefined){
        element.innerHTML = onText;
      }
      else{
        element.value = onText;
      }
    }
  }
  else{
    s.splice(n, 1); element.className = s.join(' ');
    if(offText !== undefined){
      if(element.value === undefined){
        element.innerHTML = offText;
      }
      else{
        element.value = offText;
      }
    }
  }
  return function(className, onText, offText){
    return tC(element, className, onText, offText);
  }
}
var players = I('players'), playerCount = +players.value, comp = I('computer'), player2 = I('player2'), res = I('res'), play1, play2;
function randPSR(){
  var a = ['paper', 'scissors', 'rock'];
  return a[Math.floor(Math.random()*3)];
}
function psr(p1, p2){
  var yp, op;
  if(p1 === p2){
    return "It's a tie. Play again!";
  }
  if(playerCount === 1){
    yp = 'You Win'; op = 'Computer';
  }
  else{
    yp = 'Player 1 Wins'; op = 'Player 2';
  }
  switch(p1){
    case 'paper':
      switch(p2){
        case 'scissors':
          return op+' Wins - Scissors Beats Paper';
        case 'rock':
          return yp+' - Paper Beats Rock';
      }
      break;
    case 'scissors':
      switch(p2){
        case 'paper':
          return yp+' - Scissors Beats Paper';
        case 'rock':
          return op+' Wins - Rock Beats Scissors';
      }
      break;
    case 'rock':
      switch(p2){
        case 'paper':
          return op+' Wins - Paper Beats Rock';
        case 'scissors':
          return yp+' - Rock Beats Scissors';
      }
      break;
  }
}
function paperScissorsRock(){
  aC(comp, 'hide'); comp.innerHTML = res.innerHTML = '';
  for(var i=0,p1buttons=Q('#player1>input[type=button]'),p2buttons=Q('#player2>input[type=button]'),l=p1buttons.length; i<l; i++){
    p1buttons[i].onclick = function(){
      play1 = this.value;
      if(playerCount === 1){
        play2 = randPSR(); comp.innerHTML = 'Computer Picks "'+play2+'"'; rC(comp, 'hide');
      }
      else if(!play1 || !play2){
        res.innerHTML = '';
      }
      if(play1 && play2){
        res.innerHTML = psr(play1, play2); play1 = play2 = false;
      }
    }
    p2buttons[i].onclick = function(){
      play2 = this.value;
      if(!play1 || !play2)res.innerHTML = '';
      if(play1 && play2){
        res.innerHTML = psr(play1, play2); play1 = play2 = false;
      }
    }
  }
}
paperScissorsRock();
players.addEventListener('change', function(){
  aC(comp, 'hide'); comp.innerHTML = res.innerHTML = ''; play1 = play2 = false; playerCount = +this.value;
  playerCount === 1 ? aC(player2, 'hide') : rC(player2, 'hide');
});
}); // end load wrapper

*{
  padding:0; margin:0;
}
html,body{
  width:100%; height:100%; background:#aaa; color:#000; overflow-x:hidden; 
}
body{
  overflow-y:scroll;
}
.main{
  width:940px; padding:20px; margin:0 auto;
}
select,#computer{
  border:0; margin-bottom:15px;
}
select,input{
  cursor:pointer;
}
label,select,input[type=button]{
  font:22px Tahoma, Geneva, sans-serif; padding:5px 10px; border-radius:5px;
}
input[type=button]{
  background:#ccc; border:3px solid #000; margin-bottom:15px;
}
.hide{
  display:none;
}

<!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, height=device-height, initial-scale:1' />
    <title>Same Page Paper Scissors Rock</title>
  </head>
<body>
  <div class='main'>
    <label id='players_label' for='players'>Players</label>
    <select name='players' id='players'>
      <option value='1' selected='selected'>1</option>
      <option value='2'>2</option>
    </select>
    <div class='hide' id='computer'></div>
    <div id='player1'>
      <input type='button' value='paper' />
      <input type='button' value='scissors' />
      <input type='button' value='rock' />
    </div>
    <div class='hide' id='player2'>
      <input type='button' value='paper' />
      <input type='button' value='scissors' />
      <input type='button' value='rock' />
    </div>
    <div id='res'></div>
  </div>
</body>
</html>

我的html脚本标记未链接到我的外部javascript

6 个答案: