更改div中的文本

时间:2011-07-11 00:23:28

标签: javascript

我有一个作业,第一部分是用单选按钮改变背景。我有,但第二部分是创建一个带有一些基本文本的div开始。然后我必须创建一个具有textarea的表单并使用document.getElementById('yourelementid')来查找textarea的值并更改div中创建的基本文本。我被卡住了。以下是我到目前为止的情况:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change Background Color With Radio Buttons</title>
<meta http-equiv="content-type" content="text/html"
charset=iso-8859-1" />
<script type"text/javascript">
function getInputValue() {
  var radioObj = document.forms["myForm"]["colorc"];
  for (var i=0; i<radioObj.length; i++) {
    if (radioObj[i].checked)
      return radioObj[i].value;
  }
  alert("No radio button was selected.")
}

function change_it() {
  var a = getInputValue();
  if(a=="pink") {
    document.body.style.background=a
    return false;
  } else if(a=="orange") {
    document.body.style.background=a
    return false;
  } else if(a=="yellow") {
    document.body.style.background=a
    return false;
  }
}
document.getElementById('mytextarea').innerHTML = "The text has been changed!";
</script>
</head>
<body>
<h4>Change background color to:</h4>
<form name="myForm">
  <input type="radio" name="colorc" value="pink">Pink <br>
  <input type="radio" name="colorc" value="orange">Orange <br>
  <input type="radio" name="colorc" value="yellow">Yellow <br/> <br />
  <input type="button" value="Change Background" name="Change Background" onclick="return change_it()"> 
</form>
</br>
<h4>Add text to this box to change the text below:</h4>
<div id="divid">You will change this text</div>
<form>
<textarea rows="3" col="25" id="mytextarea">You will change this text
</textarea></br>
</br>
<button type="button" onClick="changeText()">Change Text</button>
</form>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

首先,changeText()函数不存在。

其次,在JavaScript标记的末尾有这一行,在整个页面呈现后不会等待执行。由于浏览器执行任何JavaScript代码,在head标记内部完成渲染其余的html之前,由于它想要访问尚未被浏览器处理的DOM对象,因此该行失败。

document.getElementById('mytextarea').innerHTML = "The text has been changed!";