Question

该代码之前运行良好。我尝试了很多方法来修复它，但它似乎并不想工作。是因为变量太多吗？另外，我很想添加一个按钮，并在放置“随机”按钮时显示值（数组）。谢谢！

<html><head>
<title>
  Mad Libs Story
</title>

<script>

function getVars() {

    var firstPerson = String(document.getElementbyId("personOne").value);
    var firstAdjective = String(document.getElementById("adjectiveOne").value);
    var secondAdjective = String(document.getElementById("adjectiveTwo").value);
    var thirdAdjective = String(document.getElementById("adjectiveThree").value);
    var secondPerson = String(document.getElementById("personTwo").value);
    var fourthAdjective = String(document.getElementById("adjectiveFour").value);
    var firstNumber = Number(document.getElementById("numberOne").value);
    var thirdPerson = String(document.getElementById("personThree").value);

document.getElementById("madLibCreation").innerHTML = "Dear " + firstPerson + ",Overall, the camp is " + firstAdjective + "The camp counselors are " + secondAdjective + "and the food is " + thirdAdjective + ".Today, I met someone named " + secondPerson + "and we become " + fourthAdjective + "friends. I hope to write to you in " + firstNumber + "days.Sincerely," + thirdPerson + ".";
} 
</script>
</head>
<body>
<h3>
Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun!   
</h3>  

<p>
  Name of Person in Room: <input type="text" id="personOne">
</p>

<p>
  Adjective: <input type="text" id="adjectiveOne">
  </p>

 <p>
   Adjective: <input type="text" id="adjectiveTwo">
  </p>

  <p>
    Adjective: <input type="text" id="adjectiveThree">
  </p>

  <p>
    Name of Someone: <input type="text" id="personTwo">
  </p>  

  <p>
    Adjective: <input type="text" id="adjectiveFour">
  </p>

  <p>
    Number: <input type="text" id="numberOne">
  </p>

  <p>
   Name of Someone: <input type="text" id="personThree">
  </p>
<p>

<input type="submit" value="Get My MadLib Creation!" onclick="getVars();">
  </p>
<p id="madLibCreation"></p>


</body></html>

Answer 1

var firstPerson = String(document.getElementbyId("personOne").value);中的一个小错字。 getElementbyId需要大写字母B：getElementById。这是已更正类型的代码。

<html><head>
<title>
  Mad Libs Story
</title>

<script>

function getVars() {

    var firstPerson = String(document.getElementById("personOne").value);
    var firstAdjective = String(document.getElementById("adjectiveOne").value);
    var secondAdjective = String(document.getElementById("adjectiveTwo").value);
    var thirdAdjective = String(document.getElementById("adjectiveThree").value);
    var secondPerson = String(document.getElementById("personTwo").value);
    var fourthAdjective = String(document.getElementById("adjectiveFour").value);
    var firstNumber = Number(document.getElementById("numberOne").value);
    var thirdPerson = String(document.getElementById("personThree").value);

document.getElementById("madLibCreation").innerHTML = "Dear " + firstPerson + ",Overall, the camp is " + firstAdjective + "The camp counselors are " + secondAdjective + "and the food is " + thirdAdjective + ".Today, I met someone named " + secondPerson + "and we become " + fourthAdjective + "friends. I hope to write to you in " + firstNumber + "days.Sincerely," + thirdPerson + ".";
} 
</script>
</head>
<body>
<h3>
Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun!   
</h3>  

<p>
  Name of Person in Room: <input type="text" id="personOne">
</p>

<p>
  Adjective: <input type="text" id="adjectiveOne">
  </p>

 <p>
   Adjective: <input type="text" id="adjectiveTwo">
  </p>

  <p>
    Adjective: <input type="text" id="adjectiveThree">
  </p>

  <p>
    Name of Someone: <input type="text" id="personTwo">
  </p>  

  <p>
    Adjective: <input type="text" id="adjectiveFour">
  </p>

  <p>
    Number: <input type="text" id="numberOne">
  </p>

  <p>
   Name of Someone: <input type="text" id="personThree">
  </p>
<p>

<input type="submit" value="Get My MadLib Creation!" onclick="getVars();">
  </p>
<p id="madLibCreation"></p>


</body></html>

为什么此代码之前无法正常工作并为随机值添加按钮

1 个答案: