getElementById 不是显示元素的函数

Question

所以我已经仔细阅读了类似的问题，但它们都有语法错误。我已经用可用的答案检查了我的代码，但这似乎不是语法错误；但我不断收到相同的“getElementById() 不是函数”错误。以下是相关代码的 sn-ps。警报正在工作，因此在下拉菜单元素选项中适当地调用了该函数。

 $('.dropdown-menu a').on("click", "#1", function(e){
        alert("hi");
        getElementById("#caseReport").style.display = 'block';
  });


   <div class= "radioform" style='display:none;' id='caseReport'>
     <h3>Please answer the following questions.</h3><br>
   <form>
  Previous Credible Reports in Humans:
  <label class="radio-inline">
  <input type="radio" name= "optradio1">Yes
  </label>
  <label class="radio-inline">
  <input type="radio" name= "optradio1">No
  </label>
  <label class="radio-inline">
  <input type="radio" name= "optradio1">Unsure
  </label>
</form>

</div>

编辑：包括 ref 的下拉 div

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Evidence Type
<span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a tabindex="-1" href="#" id= "1">Case Report</a></li>
</ul>
</div>

Answer 1

在指示它通过其 ID 获取任何元素之前，您需要引用任何 DOM 位置，在这种情况下您可以简单地使用整个文档：

document.getElementById('caseReport');

请注意，在这种情况下，# 不是必需的

Answer 2

既然您使用的是 jQuery，那么请执行以下操作：-

$("#caseReport").css({'display':'block'});
//or $("#caseReport").css('display','block');
//or $("#caseReport").show();

如果你决定使用 javascript，那么：-

 document.getElementById("caseReport").style.display = 'block';

工作示例：-

$(document).ready(function() {
  $('.dropdown-menu a#1').click(function(e) {
    e.preventDefault();
    alert("hi");
    $("#caseReport").css({'display':'block'});
    //or $("#caseReport").css('display','block');
    //or $("#caseReport").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Evidence Type
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#" id= "1">Case Report</a></li>
  </ul>
</div>
<div class= "radioform" style='display:none;' id='caseReport'>
  <h3>Please answer the following questions.</h3><br>
  <form>
    Previous Credible Reports in Humans:
    <label class="radio-inline">
      <input type="radio" name= "optradio1">Yes
    </label>
    <label class="radio-inline">
      <input type="radio" name= "optradio1">No
    </label>
    <label class="radio-inline">
      <input type="radio" name= "optradio1">Unsure
    </label>
  </form>
</div>

注意：-

我个人说过不要将 java-script 语法与 jQuery 语法混用。纯粹使用其中一个。

请仔细检查cmets。

Answer 3

既然你已经在使用 jQuery，你不妨使用

$(function() {
	$('.dropdown-menu a#1').click(function(e) {
		e.preventDefault();
		alert("hi");
		$("#caseReport").css("display","block");
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu">
	<a id="1" href="#">Click Me</a>
</div>
<div class= "radioform" style='display:none;' id='caseReport'>
	<h3>Please answer the following questions.</h3><br>
	<form>
		Previous Credible Reports in Humans:
		<label class="radio-inline">
			<input type="radio" name= "optradio1">Yes
		</label>
		<label class="radio-inline">
			<input type="radio" name= "optradio1">No
		</label>
		<label class="radio-inline">
			<input type="radio" name= "optradio1">Unsure
		</label>
	</form>
</div>

Answer 4

要访问 HTML 元素，JavaScript 可以使用 document.getElementById(id) 方法。

在 HTML DOM（文档对象模型）中，一切都是一个节点：

• 文档本身就是一个文档节点
• 所有 HTML 元素都是元素节点
• 所有 HTML 属性都是属性节点
• HTML 元素中的文本是文本节点
• 评论是评论节点

Answer 5

您是否尝试过使用 document.getElementById()？

 document.getElementById("caseReport").style.display = 'block';