时间戳

首页 > 解决方案 > 如何将图像添加到文本冒险和 html

javascript - 如何将图像添加到文本冒险和 html

问题描述

好的，所以基本上我正在为学校做作业，它是一个基于文本的冒险游戏，我想知道在你选择一个选项后如何向页面添加文本这是我迄今为止在 javascript 中的工作：

var BookMark = 0;
var StoryHere = 0;
var Choice1Here = 0;
var Choice2Here = 0;

function StartStory() {
  StoryHere = document.getElementById('Story');
  Choice1Here = document.getElementById('Choice1');
  Choice2Here = document.getElementById('Choice2');

  postPage();

  return;
}

function Choice1() {
  console.log('Choice 1 clicked ->' + BookMark);
  BookMark = Page[BookMark + 1] * 3;

  clearPage();
  setTimeout(postPage, 1000);

  return;
}

function Choice2() {
  console.log('Choice 2 clicked ->' + BookMark);
  BookMark = Page[BookMark + 2] * 3;
  clearPage();
  setTimeout(postPage, 1000);
  return;
}

function postPage() {
  StoryHere.innerHTML = MyStory[BookMark];
  Choice1Here.innerHTML = MyStory[BookMark + 1];
  Choice2Here.innerHTML = MyStory[BookMark + 2];
}

function clearPage() {
  StoryHere.innerHTML = '';
  Choice1Here.innerHTML = '';
  Choice2Here.innerHTML = '';
}

这是在我的第二个 javascript 页面上，该页面通过 HTML 与原始页面链接，因此我可以将其放在网页上

var MyStory = ['test', 'test', 'test'];

const Page = [0, 0, 0];

一些帮助会非常有用，我想也许我可以用 CSS 以某种方式做到这一点，但我又不知道该怎么做，这也是我的 html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>story time</title>
<link rel="stylesheet" href="style.css">
<script src="story_book.js"></script>
<script src="story_main.js"></script>

</head>
<body onload="StartStory();">
<div id="Story">

</div>
<div id="Choice1" onclick="Choice1();">


</div>
<div id="Choice2" onclick="Choice2();">


</div> 
</body>
</html>

标签： javascripthtml

解决方案

您没有发布您的 HTML，但基本上如何通过 JS 添加图像的最简单方法是：将其添加到您的 html 并使用 CSS 隐藏它

<div id="image" style="display:none">
  <img src="YOUR_IMAGE" width="200px" height="200px" />
</div>

并在需要时使用 JS 显示

document.getElementById('image').style.display = "contents";

推荐阅读