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

时间:2018-03-29 11:26:37

标签: javascript getelementbyid

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

我正在尝试两件事:

  1. 检查页面上是否存在div
  2. 如果确实存在则获取内部文本值然后拆分该值以获取其中的第3个元素以输出到新变量(将在其他地方调用)
  3. 这里是页面的HTML div& JavaScript函数:

    
    
    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)
    
    <div id="divMsgPage" class="l txtr pdt4 displayi fntsi mgr16">
      1 - 40 of 71<span id="hideResultsMob" class="fntsi mgl4">Results</span>
    </div>
    &#13;
    &#13;
    &#13;

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

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

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

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

    任何输入都将不胜感激。

    提前致谢!

4 个答案:

答案 0 :(得分:0)

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

document.getElementById找不到任何元素时,它会返回null而不是undefinedtypeof(null)不是undefined,而是object

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

由于您的测试不正确(null未定义),因此可以将此测试简化为错误结果:

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

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

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)

答案 3 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;