需要帮助来样式化使用javascript的表单中的用户输入

Question

我真的是javascript新手。 我正在做一项作业，要求我创建一个madlibs游戏，其中用户提供的单词会显示在故事中。 我很难让用户提供的单词在实际故事中显示为不同的颜色。 这样做需要什么？

这是js，css和html。

 // Step 1 Found the element I want the event on var button = document.getElementById("button"); // Step 2 Defined the event listener function var onButtonClick = function() { var place = document.getElementById("place").value; var noun = document.getElementById("noun").value; var songtitle = document.getElementById("songtitle").value; var verb = document.getElementById("verb").value; document.getElementById("story").textContent += "The people of " + place + " lost their princess to the wind. She blew away so far she had no idea where she was. The land was made of " + noun + " and the clouds looked like " + noun + ". A band of " + noun + " played her favorite song, " + songtitle + ". They " + verb + " and " + verb + " until she fell asleep" + ". She woke up on a " + noun + " and realized she never left " + place + " and was only dreaming. " ; }; // Step 3 Attach event listener to element button.addEventListener("click", onButtonClick);

 body { background-color: #e03845; } form { margin: 0 auto; width: 400px; padding: 2em; border: 1px solid #CCC; border-radius: 1em; } h1 { font-family: PT Sans; font-size: 20px; text-align: center; color: #d0ddf7; } div { padding: .2em; text-align: center; color: black; } #button { padding: 2em; } #story { color: black; font-family: PT Sans bold; font-size: 20px ; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Katherine's Mad Princess Fairy Tale</title> </head> <body> <form> <h1>Mad Libs</h1> <div> <label for="Place">Place:</label> <input type="text" id="place"></textarea> </div> <div> <label for="Noun">Noun:</label> <input type="text" id="noun"></textarea> </div> <div> <label for="Song Title">Song Title:</label> <input type="text" id="songtitle"></textarea> </div> <div> <label for="Verb">Verb (past tense):</label> <input type="text" id="verb"></textarea> </div> <div id="button"> <button type="button">Tell Story</button> </div> </form> <br/> <form> <h1>Katherine's Mad Princess Fairy Tale</h1> <div id="story"></div> <script src="madlibs.js" script type="text/javascript"></script> </form> </body> </html>

Answer 1

document.getElementById("story").textContent += "The people of <span class=\"madlibword\">" + place + "<\/span> lost their princess to the wind. She blew away so far she had no idea where she was. The land was made of <span class=\"madlibword\">" +  noun "+ "<\/span>" ;

和一个CSS类

.madlibword{color:purple;}

需要帮助来样式化使用javascript的表单中的用户输入

问题描述

1 个解决方案

解决方案1
0 2018-03-13 18:52:38

需要帮助来样式化使用javascript的表单中的用户输入

问题描述

1 个解决方案

解决方案1 0 2018-03-13 18:52:38

解决方案1
0 2018-03-13 18:52:38