Question

我设计了一段代码，其中使用一个函数将输入变为大写。得到结果后，我将其输出到console.log并在其中正常运行，但是当我尝试使用document.getElementById("SomeId").innerHTML = output;时将不起作用。

我正在运行Deepin Linux（基于Debian），并使用Visual Studio Code（已安装node.js和npm）。

function up(name) {

  this.name = name.toUpperCase();
};
var nm = prompt("Type in your name in a jumble of capital and lowercase letters!");
var out = new up(nm);
//this works
console.log(out.name);
//this doesn't
document.getElementById("uppercase");

  <h1 id="upppercase">Hey</h1>
  <p id="smallcase"></p>

我希望输出与console.log();

相同

Answer 1

您的h1和id中的upppercase（3个p），您的代码会尝试找到uppercase。

此外，这里不需要new和this的构造函数。

最后，您必须将h1的内容设置为其旧内容，加上空格和新输出。您只是获得对该元素的引用，但对该引用不做任何事情。

function up(name) {
    return name.toUpperCase();
};
var nm = prompt("Type in your name in a jumble of capital and lower case letters!");

// Concatenate the name to the extisting text in the H1
document.getElementById("uppercase").textContent += " " + up(nm);

<h1 id="uppercase">Hey</h1>
<p id="smallcase"></p>

如果您真的想使用构造函数，以便您可以使用带有方法的对象，这将是更合适的：

// Constructor functions are named using Pascal Case by convention
function Up(name) {
   // Create two methods for the object
   this.makeUpper = function() { return name.toUpperCase(); };
   this.makeLower = function() { return name.toLowerCase(); };   
};
var nm = prompt("Type in your name in a jumble of capital and lower case letters!");

// Make an instance:
let myCaseMaker = new Up(nm);

// Use the object and concatenate the name to the extisting text in the H1
document.getElementById("uppercase").textContent += " " + myCaseMaker.makeUpper();
document.getElementById("smallcase").textContent += " " + myCaseMaker.makeLower();

<h1 id="uppercase">Hey</h1>
<p id="smallcase"></p>

Answer 2

这是因为在这一行：

document.getElementById("uppercase");

您什么也没做。您实际上并不是在修改DOM。您已使用innerHTML：

function up(name) {
  this.name = name.toUpperCase();
};
var nm = prompt("Type in your name in a jumble of capital and lower case letters!");
var out = new up(nm);

console.log(out.name);
document.getElementById("upppercase").textContent = out.name;

<h1 id="upppercase">Hey</h1>
<p id="smallcase"></p>

Answer 3

您的代码有点混乱。

1）您的h1偶然有一个ID upppercase，其中包含3个p

2）您的up()函数将变量分配给this，这没有意义

3）您必须使用.textContent = ...将文本放入DOM节点

尝试一下：

function up(name) {
    return name.toUpperCase();
};

var nm = prompt("Type in your name in a jumble of capital and lower case letters!");
var out = up(nm);
var h1 = document.querySelector("#uppercase");
h1.textContent = out;

<!DOCTYPE html>
<html>
    <head>
        <title>Prototype</title>
    </head>
    <body>
        <h1 id="uppercase">Hey</h1>
        <p id="smallcase"></p>
        <script src="script.js"></script>
    </body>
</html>

document.getElementById（“ id”）。innerHTML不起作用，但console.log起作用。为什么？

3 个答案: