具有价值的内部 HTML答案

【问题标题】：InnerHTML with value具有价值的内部 HTML
【发布时间】：2016-08-30 07:54:48
【问题描述】：

我需要以下代码的帮助。我需要用户将他们的内容输入占位符，而不是在脚本中，所以当用户单击按钮时，结果可以显示出来。

在本例中，“my test.asp?name=ståle&car=saab”是示例内容，但我需要将它们放入占位符，而不是在脚本中。

我用值更改了 InnerHTML，但它似乎不起作用。任何人都可以帮忙吗？非常感谢！

<body>

<p>Enter foregin character and click covert</p>

<input id="demo" placeholder="Keyword">

<button onclick="myFunction()">Convert</button>

<p id="demo"></p>

<script>
function myFunction() {
var uri = "my test.asp?name=ståle&car=saab";
var res = encodeURI(uri);
document.getElementById("demo").innerHTML = res;
}
</script>

【问题讨论】：

ID 必须是唯一的。您在 <p> 元素和 <input /> 元素上使用相同的 ID demo。
抱歉，打错字了。应该是demo和demo 1

标签： javascript innerhtml

【解决方案1】：

您可以使用脚本在占位符中设置任何值。

document.getElementById("xyz").placeholder = "Any value";

在以下位置查看： http://www.w3schools.com/jsref/prop_text_placeholder.asp

【讨论】：

【解决方案2】：

<p>Enter foreign character and click convert</p>

<input id="demo1" placeholder="Keyword"> <!-- different id from <p> tag -->

<button onclick="myFunction()">Convert</button>

<p id="demo2"></p> <!-- different id from <input> tag -->

<script>
function myFunction() {
    var uri = document.getElementById("demo1").value; // This was missing, get the value the user has typed
    var res = encodeURI(uri);
    document.getElementById("demo2").innerHTML = res;
}
</script>

看到这个JSFiddle

【讨论】：

非常感谢！巫师！这是工作。非常感谢！不知道为什么是downvote。