无法读取文本输入的未定义属性拆分答案

【问题标题】：Cannot Read Property Split of Undefined for text input无法读取文本输入的未定义属性拆分
【发布时间】：2020-04-30 21:57:23
【问题描述】：

我正在尝试构建一个文本到摩尔斯电码翻译器，并且在尝试获取作为字符串的输入值并将其转换为字母数组时，我收到此错误。

var inputValue = getInputValue();
var inputValueLetters = inputValue.split();
function getInputValue(){
    // Selecting the input element and get its value 
    var inputVal = document.querySelector("#myInput").value;
    
    // Displaying the value
    console.log(inputVal);
};

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Text Input Field Value in JavaScript</title>
</head>
<body>
    <h1>Morsi: Translate Plain Text Into Morse Code</h1>
    <input type="text" placeholder="Type something..." id="myInput">
    <button type="button" onclick="getInputValue();">Get Value</button>
    
<script src="morsi.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript html css console

【解决方案1】：

您在脚本的第一行调用了函数“getInputValue”。

var inputValue = getInputValue();

这个函数返回undefined，然后你试图调用未定义的.split方法并得到那个错误。

如果您删除脚本的前两行 - 您将不会出错。如果您需要一些额外的逻辑，而不仅仅是将输入值打印到控制台，那么您需要在读取输入值后将此逻辑放在函数getInputValue 中。喜欢：

function getInputValue(){
  // Selecting the input element and get its value 
  var inputVal = document.querySelector("#myInput").value;

  // Displaying the value
  console.log(inputVal);
  const letters = inputVal.split('');
  console.log(letters);
};

另外，检查我在 split 函数中使用空字符串参数来按字母拆分值。如果你不这样做，你将得到只有一个元素的数组，即整个输入值

【讨论】：

那么，由于 inputVal 和 letters 未在外部定义，我将使用什么来在函数外部操作结果？
如果您需要为不同的getInputValue调用共享一些变量或与其他函数共享结果，那么您需要将变量移动到外部范围（在这种情况下在全局范围内），您可以在外部有变量, 并在函数中写入值。而在函数存储变量中，你不需要在外面。喜欢
让字母； /*在第一次赋值之前没有任何值；*/ function getInputValue(){ /*只有在这个函数的 inputVal 中有值，并且每次调用都会不同*/ const inputVal = document.querySelector("#myInput").价值; /* 我们没有任何 var,let,const 特殊词，所以我们使用外部变量*/ letters = inputVal.split(''); }; function doAnother(){ /*可以有内部变量*/ const a= 3; /*可以访问外部变量*/ if(letters && letters.length){ console.log(letters.length === a) } };
@Garberchov 您可以通过请求“javascript 中的范围”阅读更多内容

【解决方案2】：

这一行：

var inputValue = getInputValue();

正在分配任何函数getInputValue();返回到变量inputValue

那个函数是return undefined，基本上没什么，因为里面没有return语句，所以第二行变成了这样：

var inputValueLetters = undefined.split();

你得到Cannot read property 'split' of undefined" 的错误很清楚undefined 是nothing 和nothing 有nothing 所以你怎么能指望nothing 有split()。

您只需要在单击按钮时获取输入的值，然后对该值调用split()。

此外，如果您想将文本拆分为一个字母数组，您需要告诉 split 函数它希望通过哪个字符拆分 space 或 forward slash (/) 等。

在我们的例子中它什么都不是，所以我们传递一个空字符串""

function getInputValue() {
  // Selecting the input element and get its value 
  var inputValue = document.querySelector("#myInput").value;
  var inputValueLetters = inputValue.split("");
  // Displaying the value
  console.log(inputValueLetters);
};

<h1>Morsi: Translate Plain Text Into Morse Code</h1>
<input type="text" placeholder="Type something..." id="myInput" value="text">
<button type="button" onclick="getInputValue();">Get Value</button>

【讨论】：

【解决方案3】：

你必须使用.split('')

const hello = 'hello'
console.log(hello.split())
console.log(hello.split(''))

【讨论】：