Question

我已经在网站上进行了搜索，虽然有很多类似的问题被问到，但回复虽然有所帮助，但我仍然遇到了一个问题并且不能很好地解决问题出来。

我正在尝试两件事：

检查页面上是否存在div
如果确实存在则获取内部文本值然后拆分该值以获取其中的第3个元素以输出到新变量（将在其他地方调用）

这里是页面的HTML div＆amp; JavaScript函数：

＆＃13;

function listSizer() {
  var ListSizeYes = document.getElementById('divMsgPage');
  if (typeof(ListSizeYes) != 'undefined' || ListSizeYes != null) {
    return document.getElementById('divMsgPage').innerText.split(' ')[2];
  }
  var ListSizeNo = document.getElementById('divMsgPage');
  if (typeof(ListSizeNo) == 'undefined' || ListSizeNo == null) {
    console.log('no list size on page')
  }
}
var listSizeOutput = listSizer()
console.log(listSizeOutput)

＆＃13;

<div id="divMsgPage" class="l txtr pdt4 displayi fntsi mgr16">
  1 - 40 of 71<span id="hideResultsMob" class="fntsi mgl4">Results</span>
</div>

＆＃13;

我遇到的问题是，当控件中的页面上没有此元素时，我收到错误＆＃34;无法读取属性＆＃39; innerText＆＃39; of null＆＃34;。我希望在一个页面上，当该函数不存在该函数进入第二个变量并且不尝试返回innerText但在控制台中返回时，“页面上没有列表大小存在”＃39;

如果我改变逻辑或者是||在if语句中＆amp;＆amp;错误消失但是当div不存在时，控制台没有输出。

我对JS比较陌生，所以我确定我忽略了一些简单的事情。

此外，由于其他限制，它必须是纯JS而不是jQuery。

任何输入都将不胜感激。

提前致谢！

Answer 1

第一个条件是传递，因为typeof(ListSizeYes) != 'undefined'是true。

当document.getElementById找不到任何元素时，它会返回null而不是undefined。 typeof(null)不是undefined，而是object。

你可以修改你的代码改变它：

＆＃13;

function listSizer() {
  var div = document.getElementById('divMsgPage');
  if (div != null) {
    return div.innerText.split(' ')[2]; //careful here because you might get `undefined` if there are not 2 spaces in the string.
  }
  else{
    console.log('no list size on page');
    return null;
  }
}
var listSizeOutput = listSizer()
console.log(listSizeOutput)

＆＃13;

<div id="divMsgPage" class="l txtr pdt4 displayi fntsi mgr16">
  1 - 40 of 71<span id="hideResultsMob" class="fntsi mgl4">Results</span>
</div>

＆＃13;

Answer 2

由于您的测试不正确（null未定义），因此可以将此测试简化为错误结果：

＆＃13;

function listSizer(id) {
  var ListSizeYes = document.getElementById(id);
  if (ListSizeYes) {
    return ListSizeYes.innerText.split(' ')[2]; // assuming there is such a text 
  }
  console.log('no list size with id "'+id+'" on page');
  return null;
}
var listSizeOutput = listSizer("divMsgPage")
console.log(listSizeOutput)

listSizeOutput = listSizer("divMsgPageX")
console.log(listSizeOutput)

＆＃13;

<div id="divMsgPage" class="l txtr pdt4 displayi fntsi mgr16">
  1 - 40 of 71<span id="hideResultsMob" class="fntsi mgl4">Results</span>
</div>

＆＃13;

Answer 3

您可以像这样简单地重构代码。

function listSizer() {
    var ListSizeYes = document.getElementById('divMsgPage');
    if (ListSizeYes) 
        return document.getElementById('divMsgPage').innerText.split(' ')[2];
    else
        console.log('no list size on page')
}

var listSizeOutput = listSizer()
console.log(listSizeOutput)

Answer 4

尝试此代码，我尝试删除内容并删除div并正常工作

＆＃13;

function listSizer() {
  var div = document.getElementById('divMsgPage');
  if ( div && div.innerText.split(' ')[2]!==undefined ) {
    console.log( div.innerText.split(' ')[2]); //careful here because you might get `undefined` if there are not 2 spaces in the string.
  }
  else{
    console.log('no list size on page')
  }
}
var listSizeOutput = listSizer()

＆＃13;

<div id="divMsgPage" class="l txtr pdt4 displayi fntsi mgr16">
1 - 40 of 71<span id="hideResultsMob" class="fntsi mgl4">Results</span>
</div>

＆＃13;

检查div元素是否存在然后返回该div的innertext值

4 个答案: