时间戳

首页 > 解决方案 > 为什么此代码在之前工作时不起作用并为随机值添加按钮

javascript - 为什么此代码在之前工作时不起作用并为随机值添加按钮

问题描述

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

<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>

标签： javascript

解决方案

中的一个小错字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>

推荐阅读