使用 Select 标签的 JavaScript 搜索日期

Question

我正在尝试使用选择标签进行搜索，按月和年查找特定日期，如果txt在字符串中包含月份值和年份值，那么我希望出现警报，但我收到错误 txt.indexOf 不是函数

var txt = document.getElementById('txt');
today = new Date();

txt.innerHTML = ('' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes());

var month = document.getElementById('month');
var year = document.getElementById('year');
var btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  if (txt.indexOf(month.value) & txt.indexOf(year.value)) {
    alert('yay');
    console.log('yay');
  }
});

<p id="txt"></p>

<select id="month">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

<select id="year">
  <option>2016</option>
  <option>2017</option>
  <option>2018</option>
</select>

<button id="btn">
  search
</button>

Answer 1

您正尝试在 DOM 节点 上调用 indexOf 方法。哪个没有那个方法。

indexOf 是可以在 arrays 上调用的方法和 strings ...

这是您修改为正常工作的代码(我不喜欢实现，但现在无法提交以使其正常工作)。

• 请不要在 2017 年使用alert()
• 切换到 const/let 而不是 var
• 重新思考您的代码结构

var txtElement = document.getElementById('txt');
today = new Date();

var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes();
txtElement.innerHTML = dateString;
txtElement.setAttribute('data-month', today.getMonth() + 1);
txtElement.setAttribute('data-year', today.getFullYear());

var month = document.getElementById('month');
var year = document.getElementById('year');
var btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  var currentMonth = txtElement.getAttribute('data-month');
  var currentYear = txtElement.getAttribute('data-year');
  if (currentMonth === month.value && currentYear === year.value) {
    alert('yay');
    console.log('yay');
  }
});

<p id="txt"></p>

<select id="month">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

<select id="year">
  <option>2016</option>
  <option>2017</option>
  <option>2018</option>
</select>

<button id="btn">
  search
</button>