javascript - HTML - How to make text disappear and make different text appear from a press of a button?

So I'm trying to make this little "choice game" of sorts on this website.

.png

I got up to this but... when you click Sure, it brings you to another page. I don't want to do that.

Instead when you click Sure, I want the text and the button to disappear and different text/buttons to appear.

Here's my code. Excuse my poor HTML, I'm not so great.

<!DOCTYPE html>
<html>
<head>
<meta name="theme-color" content="#18191b">
<link rel="icon" sizes="192x192" href="assets/trans.gif">
<title>...</title>
</head>


<div class="audio">
<audio autoplay="true" src="assets/Virtual Campfire with Crackling Fire Sounds (HD).mp3"/>
</div>


<div id="test">
<center><h1 class="center2">Do you want to join the campfire?<br> There is one person there... looking sad.</h1></center>
</div>
<center><a href="join1.html" class="center3">Sure.</a></center>


<div id="test">
<center><img class="center" src="assets/trans.gif"/></center>
</div>

<style>
    img.center {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display:block;
    position: relative;
    top: 200px;
    }
    h1.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
}
a.center3 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Calibri Light";
    text-align: center;
    top: 80px;
    position: relative;
    font-size: 25px;
    color: #EEB300;
}
#test h1 {
    margin-top: 25px;
    font-size: 45px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style>

<body style="background-color:#18191b">
</body>

</html>

Please help me, I'm pretty bad at HTML and would love some advice as well. Thanks!

So I'm trying to make this little "choice game" of sorts on this website.

http://puu.sh/ncAr8/be095ee6e2.png

I got up to this but... when you click Sure, it brings you to another page. I don't want to do that.

Instead when you click Sure, I want the text and the button to disappear and different text/buttons to appear.

Here's my code. Excuse my poor HTML, I'm not so great.

<!DOCTYPE html>
<html>
<head>
<meta name="theme-color" content="#18191b">
<link rel="icon" sizes="192x192" href="assets/trans.gif">
<title>...</title>
</head>


<div class="audio">
<audio autoplay="true" src="assets/Virtual Campfire with Crackling Fire Sounds (HD).mp3"/>
</div>


<div id="test">
<center><h1 class="center2">Do you want to join the campfire?<br> There is one person there... looking sad.</h1></center>
</div>
<center><a href="join1.html" class="center3">Sure.</a></center>


<div id="test">
<center><img class="center" src="assets/trans.gif"/></center>
</div>

<style>
    img.center {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display:block;
    position: relative;
    top: 200px;
    }
    h1.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
}
a.center3 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Calibri Light";
    text-align: center;
    top: 80px;
    position: relative;
    font-size: 25px;
    color: #EEB300;
}
#test h1 {
    margin-top: 25px;
    font-size: 45px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style>

<body style="background-color:#18191b">
</body>

</html>

Please help me, I'm pretty bad at HTML and would love some advice as well. Thanks!

Share Improve this question asked Feb 18, 2016 at 16:47 DanTheDak 31 gold badge1 silver badge2 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

I have created a working example from your code. You can check it here pre http://codepen.io/imanik/pen/bEyVpj

$("#confirm-btn").on("click", function() {
  $(this).hide();
  $("#test").hide();
  $("#another").fadeIn("slow");
  return false;
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta name="theme-color" content="#18191b">
  <link rel="icon" sizes="192x192" href="assets/trans.gif">
  <title>...</title>
</head>


<div class="audio">
  <audio autoplay="true" src="assets/Virtual Campfire with Crackling Fire Sounds (HD).mp3" />
</div>


<div id="test">
  <center>
    <h1 class="center2">Do you want to join the campfire?<br> There is one person there... looking sad.</h1>
  </center>
</div>
<div id="another" style="display:none;">
  <center>
    <h1 class="center2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sit doloribus officiis praesentium assumenda, quod eaque illum voluptatem voluptatum distinctio.</h1>
  </center>
</div>
<center><a href="join1.html" class="center3" id="confirm-btn">Sure.</a>
</center>


<div id="test">
  <center>
    <img class="center" src="assets/trans.gif" />
  </center>
</div>

<style>
  img.center {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display: block;
    position: relative;
    top: 200px;
  }
  h1.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
  }
  a.center3 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Calibri Light";
    text-align: center;
    top: 80px;
    position: relative;
    font-size: 25px;
    color: #EEB300;
  }
  #test h1 {
    margin-top: 25px;
    font-size: 45px;
    text-align: center;
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    animation: fadein 2s;
  }
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Firefox < 16 */
  @-moz-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Internet Explorer */
  @-ms-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Opera < 12.1 */
  @-o-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>

<body style="background-color:#18191b">
</body>

</html>

The way its works the content that you don't want to show at the beginning set CSS display property to none so that that will be hidden.

Then target the button using Jquery and listen for the click event. When it happened simply hide all the elements that you want to hide and show whose will be visible.

You can't give more than one tag the same id, so use classes instead.
<div id="test"> → <div class="test">

Put CSS code in an external .css file, and link to it in the head element.

<head>
  <link rel="stylesheet" type="text/css" href="file_name.css"/>
  ...
</head>

As for your question, try:

<div id="will_disappear">
  <div id="test">
  <center><h1 class="center2">Do you want to join the campfire?<br>There is one person there... looking sad.</h1></center>
  </div>
  <center><a href="#" class="center3" onclick="document.getElementById('will_disappear').style.display = 'none';for (var i=0;i<document.getElementsByClassName('will_show').length;i++){document.getElementsByClassName('will_show')[i].style.display = 'block';}">Sure.</a></center>
</div>
<div class="will_show">
  Content...
</div>

.will_show {
  display: none;
}

Why don't you consider jQuery? You have to do steps like this:

Put the both contents into 2 separate divs and give them two different ids.
Initialize the other div with attribute display:none;
On the click of button, you can add attributes to both the divs.

Code:

$().ready(function(){
    $("#button").click(function(){
        $("#div-to-hide").attr("display","none");
         $("#divtodisplay").attr("display","block");
     });
});

And in the <style> tag initially, you have to set

#divtodisplaylater{
   display:none;
}

And consider jQuery for different functions, details of the function at JQuery website

http://api.jquery./attr/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HTML - How to make text disappear and make different text appear from a press of a button? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)