JavaScript-如何将图像添加到文本冒险和HTML-堆栈溢出

顺晟科技

2022-10-18 13:42:57

179

好的，基本上我正在为学校做一个作业，这是一个基于文本的冒险游戏，我想知道如何在你选择一个选项后将文本添加到页面中。这是我到目前为止在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：

<代码><；！文档类型HTML>；<；HTML Lang="；英文"；>；<；头部>；<；元字符集="；UTF-8"；>；<；标题>；故事时间<；/标题>；<；link rel="；样式表"；href="；style.CSS"；>；<；脚本SRC="；故事_book.JS"；>；<；/script>；<；脚本SRC="；文章_main.JS"；>；<；/script>；<；/标题>；<；正文加载="；startStory（）；"；>；<；DIV ID="；故事"；>；<；/DIV>；<；DIV ID="；选择1"；onclick="；选择1（）；"；>；<；/DIV>；<；DIV ID="；选择2"；onclick="；选择2（）；"；>；<；/DIV>；<；/正文>；<；/HTML>；

顺晟科技：

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

隐藏它

<!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>

并在需要时使用JS

显示它

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

上一篇：HTML/CSS-处理拒绝垂直居中的下一篇：HTML-过滤Django模板中的外

网站建设

Html

JavaScript-如何将图像添加到文本冒险和HTML-堆栈溢出