javascript - 此处新增 : Issues linking HTML to JS

标签 javascript html forms

我已经将 JS Fiddle 中的代码达到了可行的水平,但我在将代码组合在一起以便将其放入实际站点中时仍然遇到问题。

我正在将表单嵌入到共享点站点中,我知道我读到 JS 可能需要作为文件从外部链接。

表单功能:HTML 输入由 JavaScript 串在一起,然后通过警报显示。

<HTML>
<body>
<head>
<script language=“javascript”>
var button = document.getElementById('test');
var date = document.getElementById('1');
var contact = document.getElementById('2');
var contacttype = document.getElementById('3');
var os = document.getElementById('4');
var devicetype = document.getElementById('5');
var device = document.getElementById('6');
var reason = document.getElementById('7');
var comments = document.getElementById('8');

button.onclick = function () {
    var str = "Date: " + date.value + "   " + "Contact: " + contact.value + "   " + "Insured or Agent: " + contacttype.value + "   " + "Operating System: " + os.value + "   " + "Tablet or Phone: " + devicetype.value + "   " + "Device Name: " + device.value + "   " + "Reason fo Call: " + reason.value + "   " + "Additional Comments: " + comments.value;
    alert(str);

};
</script>
</head>
<h1> SR Template
</h1>
<label>Date:
    <input id="1" />
</label>
<br />
<label>Contact:
    <input id="2" />
</label>
<br>
<label>Insured or Agent:
    <input id="3" />
</label>
<br>
<label>Operating System:
    <input id="4" />
</label>
<br>
<label>Tablet or Phone:
    <input id="5" />
</label>
    <br>
    <label>Device Name:
    <input id="6" />
</label>
        <br>
    <label>Reason for call:
    <input id="7" />
</label>
            <br>
    <label>Additional Comments:
    <input id="8" />
</label>

<br />
<button id="test">Test</button>


</body>
</HTML>

最佳答案

language=“javascript”

您不能使用带 Angular 引号来分隔属性值,因此这是一种无法识别的语言,因此浏览器将完全忽略该脚本。

这也是 HTML 3.2,已于 1998 年废弃。现在是 2015 年。编写 HTML 5。根本不包含语言属性。

<小时/>
var button = document.getElementById('test');

脚本元素之前没有具有该 id 的元素。

您的代码不在稍后调用的函数中。

当您尝试运行该代码时,该元素不存在。

将脚本移动到您尝试从 DOM 中获取的元素后面,或者将其包装在 onload 函数中,就像您配置 JSFiddle 所做的那样。

关于javascript - 此处新增 : Issues linking HTML to JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31126607/

相关文章:

function - JavaScript 函数返回一些值

javascript - 当函数作为参数传递时,参数如何传递给该函数?

javascript - jsPlumb setContainer 方法不存在 : "Uncaught TypeError: undefined is not a function"

javascript - 摆脱 html 元素 - React

javascript - 如何将多个异步 $.get 请求的结果存储在一个数组中?

javascript - 如何从表单提交时的多个输入框中获取值并将这些值作为对象存储在 React 的状态数组中?

angularjs - 在 GoLang 中解析嵌入式结构形式的值

wordpress - Woocommerce - 如何将新的 Google "no Captcha"reCaptcha 添加到前端注册表中

javascript - Webpack 缺少路径错误

javascript - 如何使用jquery根据屏幕宽度更改div的类