Change Text with Click Events

[zilongxuan001]

介绍

当clilck event发生时，我们用jQuery去更新HTML元素。

方法

当用户点击Get Messagebutton时，我们可以用messageclass改变元素的文本，变成Here is the message。

$(".message").html("Here is the message");

代码

<script>
  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
    $(".message").html("Here is the message");  
      // Only change code above this line.
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

结果显示

点击Get Message按钮后

来源

https://www.freecodecamp.org/challenges/change-text-with-click-events