Question

我正在尝试创建一个脚本，该脚本将允许用户在输入区域中输入单词或数字。然后，他们将单击处理按钮，并且信息也显示在事件输出空间中。我在尝试为每个事件编号时遇到了麻烦。我想创建一个数组，允许用户查看每个事件，编号。谢谢您能给我的帮助。

window.onload = function() {
  document.getElementById("userInput").value = "";

  document.getElementById("processUserText").onclick = function(evt) {
    addEventOutputTracking(document.getElementById("loopResults").value + "processed value of userinput field: \"" + document.getElementById("userInput").value + "\"");
  } // userInput onclick event

  document.getElementById("clearOutput").onclick = function(evt) {
    resetOutput();
  } // clearOutput onclick event

} // end window.onload

function showResults() {

  var loopOutput = "";

  for (x = 0; x < 100; x++) {

    loopOutput += "Loop counter = " + x + "<br />";
  }

  document.getElementById("loopResults").value = "";
} // end function showResults()

function swapImageClass(imageID, imageState, eventName) {
  var outputText = "Event action on element ID " + imageID;
  addEventOutputTracking(eventName, outputText, "");

  document.getElementById(imageID).className = "img" + imageState;
} // end function swapImageClass

function addEventOutputTracking(eventName, outputText, extraText) {
  var node; // for element to add child element later
  var pChildNode = document.createElement("p"); // new element that will be child of node

  // new document parts created, so add them to document
  node = document.getElementById("eventOutput"); // existing div we are adding to
  node.appendChild(pChildNode); // adding p element as child of div
  pChildNode.appendChild(document.createTextNode("User Event: " + eventName + " - " + outputText + " " + extraText)); // adding text to new p element
} // end function addEventOutputTracking

function resetOutput() {
  var node = document.getElementById("eventOutput");
  while (node.firstChild)
    node.removeChild(node.firstChild);

  node.appendChild(document.createTextNode("Recently Cleared - Space is reserved for event output information"));
} // end function resetOutput

span {
  padding: 5px 10px 5px 10px;
  background-color: #00FFFF;
}

#eventOutput {
  border: 1px solid red;
  width: 620px;
  padding: 10px;
  front-size: small;
  color: blue;
  background-color: #FFFF99
}

#firstP {
  front-style: italic;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Assign 8 - DOM</title>

  <script type="text/javascript" src="Assign-8.js"></script>
  <link rel="stylesheet" type="text/css" href="Assign-8.css">

</head>

<body>
  <p>
    <input id="userInput" type="text" size="50" /><br /> User Input Text
  </p>

  <p>
    <span id="processUserText">Process Input</span>
    <span id="clearOutput">Reset Output</span>
  </p>

  <div id="eventOutput">
    <p id="firstP">This space is reserved for event output information</p>
  </div>
</body>

</html>

坚持使用dom方法创建数组

0 个答案: