Question

<div id=name>Whats your Name?: <input type="text" id="User">
<input type="button" value="submit" onclick="giveUser()"/>
<br> I dont know your Name </br>
</div>
<br>
<div id=P2>
Oh its <span id=User>Default</span>!
</div>
<script>

function giveUser() {
var User = document.getElementById("User").value;
console.log(User)
document.getElementById('User').innerHTML = User;
document.getElementById('name').style.visibility = 'hidden';
document.getElementById('P2').style.visibility = 'visible';
}

</script>

我在这里通过文本框向用户询问名称但它不会在跨度中显示它。

这是一个小提琴demo

Answer 1

ID属性应该是唯一的。您的span和input都有User

的ID

更改一个ID，然后重试。（https://jsfiddle.net/k04pvhug/1/）

此外，您应该用引号（"）括起所有属性。 It's not required，但它看起来更干净;）

Answer 2

你需要在id周围引用。

<span id="someid" />

然后JavaScript可以访问DOM并设置innerHTML
此外，P2是一个预定义的设置，所以它无论如何都不能作为id。试试"paragraphTwo"或其他什么。

Answer 3

在id周围添加引号，并确保每个属性都具有唯一ID 像这样

<span id="id" />
<p id="paragraph" />
<span id="span2" />

Answer 4

为var和id使用不同的名称

function giveUser() {
        var User = document.getElementById("User").value;
        console.log(User)
        document.getElementById("demo").innerHTML = User ;
        document.getElementById('name').style.visibility = 'hidden';
        document.getElementById('P2').style.visibility = 'visible';
    }

#P2 {
        visibility: hidden;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=name>Whats your Name?:
    <input type="text" id="User">
    <input type="button" value="submit" onclick="giveUser()" />
    <br>I dont know your Name</br>
</div>
<br>
<div id=P2>Oh its <span id="demo">Default</span>!</div>

显示范围中的var

4 个答案: