将Javascript转换为html不是'；不行吗？_Javascript_Html_Forms

将Javascript转换为html不是'；不行吗？

javascript html forms

将Javascript转换为html不是'；不行吗？,javascript,html,forms,Javascript,Html,Forms,我对html非常、非常陌生，但我正在尝试一个由NCBO BioPortal制作的小部件。小部件是一个javascript文件，允许管理员将表单字段限制为从外部词汇表中提取的特定术语。感谢您提供的关于它为什么不起作用的见解 <html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <scrip

我对html非常、非常陌生，但我正在尝试一个由NCBO BioPortal制作的小部件。小部件是一个javascript文件，允许管理员将表单字段限制为从外部词汇表中提取的特定术语。感谢您提供的关于它为什么不起作用的见解

<html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>

<meta charset="utf-8">
<title> NCBO Widget tester </title>

</head>

<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>

<form action="/action_page.php">
  Term tagger:<br>
  <input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

以下是小部件的链接：

<html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>

<meta charset="utf-8">
<title> NCBO Widget tester </title>

</head>

<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>

<form action="/action_page.php">
  Term tagger:<br>
  <input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

下面是它应该做的：

<html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>

<meta charset="utf-8">
<title> NCBO Widget tester </title>

</head>

<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>

<form action="/action_page.php">
  Term tagger:<br>
  <input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

-向前看，这样您就不需要键入整个术语
-受控词汇表提供了不同用户使用术语的一致性

<html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>

<meta charset="utf-8">
<title> NCBO Widget tester </title>

</head>

<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>

<form action="/action_page.php">
  Term tagger:<br>
  <input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

以下是我的HTML，按照本页上的指导原则编写：

<html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>

<meta charset="utf-8">
<title> NCBO Widget tester </title>

</head>

<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>

<form action="/action_page.php">
  Term tagger:<br>
  <input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>


小部件测试仪
小部件测试仪
字段中的术语选择
<html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>

<meta charset="utf-8">
<title> NCBO Widget tester </title>

</head>

<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>

<form action="/action_page.php">
  Term tagger:<br>
  <input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

术语标记器：

我不确定，但看起来您的脚本在加载页面之前正在运行。您需要将脚本放在html代码下面的正文中，或者将

defer

添加到

标记中

<html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>

<meta charset="utf-8">
<title> NCBO Widget tester </title>

</head>

<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>

<form action="/action_page.php">
  Term tagger:<br>
  <input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript" 

src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js " defer></script>

将脚本标记放在主体的末尾并不能保证在DOM呈现后它不会加载。这就是为什么jQuery程序员通常将代码包装在

$（function（）{}）中的原因谢谢）请注意，我也是JS新手，请尝试help@VtoCorleone它确实保证它将在DOM准备好后加载，因此您不需要$（function（）{}）如果脚本位于
标记的末尾