Question

好的Javascript非常新。尝试通过使用外部javascript文件更改按钮上的文本来学习代码。但是我甚至无法在外部阅读按钮值，在Chrome的调试工具中我看到我的按钮值是btn =＆＃34;＆＃34;。它读取按钮对象但无法读取其属性。

<html>
<head>

    <title> Test  </title>
    <script type="text/javascript" src="Gle.js"></script>
</head>

<body>
    <div><canvas id="Gle" width="800" height="600"></canvas>
</div>
    <div>
        <h2>Enter the mass and coordinates</h2> 
        <input id="txtbox" type="text" /><br/>
        <button id="btn" onclick="change()">Add</button>

    </div>


    </body>
</html>

Gle.js

"use strict";


function change() {
    var x = document.getElementById("btn").value;
    var elem = document.getElementById("btn");
    var txt = document.getElementById("txtbox");
    txt.text = elem.value;
    elem.value = "Ok";
    }

当我调试 x 值时，它是＆＃34;＆＃34;，我的屏幕上没有任何变化。我使用括号IDE。

Answer 1

x为空，因为'#btn'未指定“value”属性。 “添加”字符串位于其内部HTML（或文本）

中

alert(document.getElementById("btn").innerText);

您可以在事件范围内为this编制索引，它是'#btn'，this.innerText的引用。

另一种方法是获取'#btn'子节点值，这是跨浏览器。

alert(this.childNodes[0].nodeValue);

这会警告元素内部指定的第一个文本。

Answer 2

我希望按钮标题“添加”出现？

该按钮没有value属性，因此其value属性为空字符串。

“添加”是按钮元素内文本节点的内容。

var x = document.getElementById("btn").firstChild.data;

Answer 3

您可以尝试将value属性分配给button

<button id="btn" onclick="change()" value="Add">Add</button>

Answer 4

如果您想根据输入框中的内容更新按钮文本，代码可能如下所示：

<button id="myButton">Change Me</button>
<input id="myInput" type="text" value="To This"/>

并在JS中：

document.getElementById("myButton").click(function(){
    var inputValue = document.getElementById("myInput").value
    document.getElementById("myButton").innerText = inputValue
    // You could also use 'this' to refer to document.getElementById("myButton"):
    // this.innerText = inputValue
})

Javascript不会将信息从html传递到函数中

4 个答案: