Question

我正在制作一个小的JavaScript演示，我希望它能够工作，所以当你在提示框中输入正确的单词时，它会显示一个可点击的链接（或按钮）以进入另一个页面（目前是一个占位符链接谷歌）与一些文字一起。我想就如何有效和简单地做到这一点提出一些建议。感谢。

<button onclick="myFunction()">Click me to talk to the guard</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var colour = prompt("If you wanna get in to the castle tell me what the current king's favourite colour is");

if (colour == "red" || colour == "Red") {
txt= "well done" + <button onclick="a href="www.google.com">Click to continuue</button> <!--incorrect code to be changed-->
 } 
else {
txt="sorry you aren't allowed in";
 }
  document.getElementById("demo").innerHTML = txt;
}
  var txt;
</script>

Answer 1

您缺少将<button> txt中的'<button onclick="a href="www.google.com">Click to continuue</button>' html连接起来的单引号。将代码更改为包含单引号，

function myFunction() {
var txt;
var colour = prompt("If you wanna get in to the castle tell me what the current king's favourite colour is");
if (colour == "red" || colour == "Red") {
txt= "well done" + '<button onclick="a href="www.google.com">Click to continuue</button>';
 } 
else {
txt="sorry you aren't allowed in";
 }
  document.getElementById("demo").innerHTML = txt;
}

最终代码

<button onclick="myFunction()">Click me to talk to the guard</button>
<p id="demo"></p>

    <!DOCTYPE html>
<head>
        <title>Donjons et Lardons</title>
        <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
        <meta charset="utf8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="css/style.css">
        <script src="script/script.js"></script>
        <script src="script/generator.js"></script>
</head>

<body>

<!-- HEADER -->

    <header>
        <h1>Donjons et Lardons</h1>
    </header>
    <p class="big">Parce que tout est bon dans un donjon</p>


<!-- NAV -->


<nav role="navigation" class="navbar navbar-default">
  <div class="container-fluid">
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
    </div>
    <!-- The Collapsing items  -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html"><span class="glyphicon glyphicon-fire"> </span> Héros</a></li>
        <li><a href="ludum.html"><span class="glyphicon glyphicon-time"></span>  Ludum Chronologia</a></li>
        <li><a href="lardon.html"><span class="glyphicon glyphicon-piggy-bank"></span>  L'art du Lardon</a></li>
        <li><a href="coffre.html"><span class="glyphicon glyphicon-shopping-cart"></span>  Le coffre à jouets</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- SECTION -->


 <!-- <p id="placeholder">

  </p>
  <button type="button" class="btn btn-warning">Rollin'</button>
  <script src="script/script.js"></script>
  <script src="css/style.css"></script>
-->
<div class="container-fluid">
  <section class="row form-group">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-1"></div> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
      <button type="button" class="dice-roll btn btn-danger">roll dice</button>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">      
      <div id="dice-side-1" class="dice">0</div>
      <div id="dice-side-2" class="dice">0</div>
    </div>
    <div class="col-lg-4 col-md-3 col-sm-2 col-xs-1"></div>  
  </section>

  <section class="row form-group">
      <div class="col-md-4"></div>  
      <div class="col-md-4">
        <h2 id="status"></h2>
      </div>
      <div class="col-md-4"></div>
  </section>

   <section class="row form-group">
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-3"></div>  
      <div class="col-lg-4 col-md-5 col-sm-6 col-xs-6 text-center">
              <button type="button" class="btn btn-danger">Besoin d'un nom ?</button>
      </div>
      <div id="h2" class="col-lg-5 col-md-4 col-sm-4 col-xs-3">
        <h2></h2>

      </div>
</div>


<!-- FOOTER -->
 <div class="footer navbar-fixed-bottom">
    <footer>
        <p class="big">Surtout les moines ronchons</p>
    </footer>
    </div>
</body>
</html>

Answer 2

你几乎是对的。这应该有用。

var button = document.querySelector('button')
var result = document.querySelector('#result')
button.addEventListener('click', onButtonClick)

function onButtonClick(e) {
  var toInsert;
  var color = prompt("If you wanna get in to the castle tell me what the current king's favourite colour is");

  if (color.toLowerCase() === "red") {
    toInsert = 'Well done!\n\n <a href="www.google.com">Click to continue</a>'
  } else {
    toInsert = "sorry you aren't allowed in";
  }
  result.innerHTML = toInsert;
}

<button>Click me to talk to the guard</button>
<div id="result"></div>

Javascript - 如果在提示中输入了正确的单词，则会显示一个链接

2 个答案: