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 个答案: