如何在 Javascript 中将结果成功显示到表单字段？

Question

使用split()函数后，我不知道具体怎么设置结果；但是，我认为声明有问题。此外，innerHTML 可能不适合在 textarea 表单元素中设置结果。

这是js代码：

function splitNumber(){
    var number = document.getElementById("pNumber");
    var res  = number.split(" ");


    document.getElementById("aCode").innerHTML = res[1]+res[2]+res[3];


    document.getElementById("aNumber").innerHTML= res[5]+res[6]+res[7]+res[8]+res[9]+res[10]+res[11];

}


function start(){
    var splitButton = document.getElementById("split");
    splitButton.addEventListener("click", splitNumber, false);
}

window.addEventListener("load", start, false);

我必须将脚本放在 HTML 文档的 header 中。

这是 HTML 文档：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Telephone Number</title>
<linkrel="stylesheet"type="text/css"href="style.css">
<scriptsrc="NumberProcessing.js"></script>     
</head>

<body>
<h1>T Number</h1>
<table>
 <tbody>
  <tr class="thistable">
   <td>Enter a phone number<br/>
    [in the form (555) 555-5555]</td>
   <td><input id="pNumber" type="text" /></td> 
  </tr>
  <tr class="thistable">
   <td><input id="split" type="button" value="Split" /></td>
   <td></td>
  </tr>
  <tr class="thistable">
   <td>Area code:</td>
   <td><textarea id="aCode" rows="1" cols="4"></textarea></td>
  </tr>
  <tr class="thistable">
   <td>Number:</td>
   <td><textarea id="aNumber" rows="1" cols="9"></textarea></td>
  </tr>
 
 </tbody>
</table>

</body>

</html>

Answer 1

您按 space 拆分，因此您最终将得到这两个元素数组：[(555), 555-5555]

改为这样做：

var number = document.getElementById("pNumber").value;

document.getElementById("aCode").innerHTML = number[1] + number[2] + number[3];


document.getElementById("aNumber").innerHTML= number[5] +  number[6] + number[7] + number[8] + number[9] + number[10] + number[11];

Answer 2

function splitNumber(){
    var number = document.getElementById("pNumber").value;

    document.getElementById("aCode").value = number.substr(1, 3);
    document.getElementById("aNumber").value = number.substr(6,8);

}

不需要拆分。使用 substr() 获取相关部分。

Answer 3

这里是使用 split 函数三次的答案。

function splitNumber(){
    var number = document.getElementById("pNumber").value;
    var res = number.split(" ");
    var res1 = res[0].split("");
    var res2 = res[1].split("");

    document.getElementById("aCode").value = res1[1] + res1[2] + res1[3];
    document.getElementById("aNumber").value = res2[0] + res2[1] + res2[2] + res2[4] + res2[5] + res2[6] + res2[7];
}

我知道，它看起来不太好，但它确实有效！

Answer 4

使用 split 时你可以简单地做

document.getElementById("aCode").value = res[0];
document.getElementById("aNumber"). value = res[1];

因为它将在给定的分隔符处剪切字符串，return 一个包含分隔子字符串的数组。

如何在 Javascript 中将结果成功显示到表单字段？

How can I display successfully a result to a form field, in Javascript?

javascript

arrays

split

function

dom-events