JavaScript调用getElementById获取元素提示未定义问题求助

核心错误点 #

• getElementById 是document对象的内置方法，必须通过document.getElementById()调用，直接写getElementById()会触发未定义错误
• HTML规范要求id全局唯一，你同时给<h1>和<button>设置了相同的coupon id，会导致选择器只能匹配到第一个元素，逻辑异常
• 你的脚本放在<head>标签中加载，执行时body内的DOM还未渲染完成，直接调用选择器会拿到null
• JS操作元素样式必须通过元素.style.样式属性的写法，不能直接写display:block，同时你拿到的DOM元素本身不等于它的display属性值，判断逻辑有误

修复后的代码 #

HTML代码 #

<html>
<head>
  <title>Exercise</title>
  <link rel="stylesheet" href="stylesheet.css">
  <!-- 加defer属性，等DOM渲染完成后再执行JS -->
  <script src="javascript.js" defer></script>
  <style>
    /* 先默认隐藏优惠券相关元素 */
    .coupon-item {
      display: none;
    }
  </style>
</head>
<body>
  <div class="inputi">
    <p class="input-text">Une Jam?</p> <input placeholder="Sheno emrin..." type="text" id="inputId">
    <button type="button" onclick="getInputValue()">Vazhdo</button>
    <p id="message"></p>
  </div>
  <!-- 重复id改为通用class，避免冲突 -->
  <h1 class="coupon-item">You won giftcard </strong></h1>
  <button class="coupon-item">abas</button>
</body>
</html>

JavaScript代码 #

// 登录验证通过后执行这段逻辑
function showCoupon() {
  // 选中所有优惠券元素
  const couponEls = document.querySelectorAll('.coupon-item')
  couponEls.forEach(el => {
    el.style.display = 'block'
  })
}

// 原有登录验证逻辑
function getInputValue() {
  const inputVal = document.getElementById('inputId').value.trim()
  // 这里替换成你自己的登录验证逻辑
  const loginSuccess = true // 模拟验证成功
  if (loginSuccess) {
    showCoupon()
    // 你的其他后续逻辑
    // display_image(images[z], 400, 400, 'Javascript');
    // document.write('<br>' + user[i]);
  } else {
    document.getElementById('message').textContent = '验证失败，请重试'
  }
}

内容的提问来源于stack exchange，提问作者samgear