document.write 不起作用

我试图让它成为"document.write"，但它没有出现。我正在使用 Dreamweaver。

<!DOCTYPE html> 
<html> 
<head> 
<title>Untitled Document</title> 
<script> 
  x=0;
  function newPerson(){
    x++;
    document.write(x);
    var pname = "p" + x;
    var jj =document.forms["frm1"]["fname"].value;
    var gg =document.forms["frm1"]["lname"].value;
    document.write(pname + jj + gg);
  }
</script>
</head>
<body>
  <form name="frm1" onSubmit="newPerson()">
  First Name: <input type="text" id="fname" name="fname"/> <br/>
  Last Name: <input type="text" id="lname" name="lname"/><br/>
  <input type="submit" value="update"/>  </form>
</body> 
</html>

这现在可以工作了

.HTML：

<form method="post" name="frm1" onsubmit="return newPerson()"> <!-- return -->
    First Name: <input type="text" id="fname" name="fname"/> <br/>
    Last Name: <input type="text" id="lname" name="lname"/><br/>
    <input type="submit" value="update"/>
</form>

.JS：

var x = 0;
function newPerson(){
    var form = document.frm1; // or : document.forms[0]; for first form
    x++;
    var pname = "p" + x;
    var jj = form.elements["fname"].value;
    var gg = form.elements["lname"].value;
    document.write(x);
    document.write(pname + jj + gg);
    return false; // <-- stops submission
}

演示。

对代码进行以下更改。它运行良好：

<script> 
  var x=0;
  function newPerson(){
    x++;
    document.write(x);
    var pname = "p" + x;
    var jj = document.getElementById('fname').value;
    var gg =document.getElementById('lname').value;
    document.write(pname + jj + gg);
  }
</script>

document.write(x);的需求是什么？你可以很容易地使用alert(x);.还有一件事，根本不清楚这段代码背后的目的是什么。请确保将来提供详细的问题。

TRY THIS to check what's happening:-
<!DOCTYPE html> 
<html> 
<head> 
<title>Untitled Document</title> 
<script> 
x=0;
function newPerson(){
x++;
document.write(x);
  // var pname = "p" + x;
  // var jj =document.forms["frm1"]["fname"].value;
  // var gg =document.forms["frm1"]["lname"].value;
  // document.write(pname + jj + gg); 
return false;
}
</script> </head>
<body>
<form name="frm1" onSubmit="return newPerson()">
First Name: <input type="text" id="fname" name="fname"/> <br/>
Last Name: <input type="text" id="lname" name="lname"/><br/>
<input type="submit" value="update"/>  </form>
</body> </html>
Explanation:- As you submit you form. it calls to your function. document.write executes.
and document.write  will clear document area and will write there value of x.
now when code goes to second line there is no form so there is no value .

所以这将给出JavaScript错误。并遵循几点：-

*onsubmit is used with return , means return true then submit form else not. but in your code form will be submitted in any case.
* As form submit to default action, means self page. page will reload. 
you can check what's happening, by putting breakpoints in firebug, or debug console in any modern browser. and please enable persist log upon navigation.

所以你会发现那里发生了什么。

您的代码有几个问题：

由于默认submit操作，表单正在提交。您必须通过向 JavaScript 函数添加return false;并return newPerson();表单的 onSubmit 属性来防止这种情况发生。
您的document.write(x)行覆盖了页面，这意味着最初存在的所有元素（包括fname和lname）都将丢失，因此无法访问。删除此行。
同样不是document.write，有一个outputDiv并将输出写入其中。通常，这样做document.write被认为是不好的做法，因为它会重新绘制整个页面。

纠正上述所有问题，您的代码应如下所示才能工作。

.HTML：

<form name="frm1" onSubmit="return newPerson();">First Name:
    <input type="text" id="fname" name="fname" />
    <br/>Last Name:
    <input type="text" id="lname" name="lname" />
    <br/>
    <input type="submit" value="update" />
</form>
<div id='outputDiv'></div>

.JS：

  x = 0;
  function newPerson() {
      x++;
      console.log(x); //just to see what is the value of x in console. not needed otherwise
      var pname = "p" + x;
      var jj = document.frm1.fname.value;
      var gg = document.frm1.lname.value;
      document.getElementById('outputDiv').innerHTML = pname + jj + gg; //set the computed value to the outputDiv.
      return false;
  }

工作演示

相关内容

最新更新

热门标签：