如何在同一页面上获得答案而不是警报？答案

【问题标题】：How can I get answer on same page instead of an alert?如何在同一页面上获得答案而不是警报？
【发布时间】：2016-09-01 13:32:53
【问题描述】：

我想要一个按钮，每次点击它都会给你一个不同的答案（动物、电影或电视节目等），问题是我有一个按钮（我在网上找到的，我是新手编码）但是那个按钮在一个小警报框中给了我答案，有没有办法让它在按钮下面给我答案？这是我找到的代码：

var words = ['Animals', 'Movies', 'TV Shows'];

function randomAlert() {


  var alertIndex;


  var randomValue = Math.random();


  if (randomValue < 0.5) {
    alertIndex = 0;
  }


  else if(randomValue < 0.8) {
    alertIndex = 1;
  }


  else {
    alertIndex = 2;
  }

  alert(words[alertIndex]).innerHTML
}

【问题讨论】：

只要去掉警报并在文档中插入文本，innerHTML 也应该在函数调用中
我认为有一个运行脚本的 HTML 文档？如果是这样，您的问题here 有一个很好的答案。只需在 HTML 中插入一个元素（如 h1 标记或 p 标记），为其指定一个 ID，然后将代码中的警告行替换为该链接中的答案，以获得您正在寻找的结果。跨度>

标签： javascript

【解决方案1】：

您可以摆脱警报调用并将其插入到 div、span、h1 等中。以下是多种方式中的一个示例：

var words = ['Animals', 'Movies', 'TV Shows'];

function randomSelect() {


  var index;


  var randomValue = Math.random();


  if (randomValue < 0.5) {
    index = 0;
  }


  else if(randomValue < 0.8) {
    index = 1;
  }


  else {
    index= 2;
  }

  document.getElementById('answer').innerText = words[index]; //Get's an element of id 'answer'
}

randomSelect(); //Executes function

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div id="answer">
        <!-- Answer is inserted into here !-->
    </div>
</body>
</html>

上面的get是一个id为answer的元素，并将其插入到元素的文本中。这是通过访问元素的innerText 属性来完成的，该属性返回元素的文本。然后我将值重新分配给index。这是一个相当简单的方法，我清理了一些函数、变量的名称。

【讨论】：

终于成功了！唯一的问题是它给我的结果是“0、1 或 2”。我是否必须做一些不同的事情才能给我单词（动物、电视节目、电影）而不是数字？
更新了@DanielFregoso，它现在应该可以正常工作了:)
再问一个问题，有没有办法改变答案的字体（字体、颜色、大小）？
当然，使用 CSS。只需将 #answer 定位为您的规则，或者您可以将 div 替换为跨度并将其应用于跨度
你能帮帮我吗？ D：我只能使用更改颜色，但我仍然无法更改大小或面部。这是我写的：