html属性中的Javascript

Question

我在这里有一个非常简单的查询。 我有一个带有div和一个form元素的视图页面。 这就是他们的样子。

<div id="candy" value="valueOfCandy" ></div>

<input type="text" value="javascript:document.getElementById('candy').getAttribute('value')"/>

我需要在输入属性（可以是任何属性）中访问candy的值。

我尝试了上面显示的代码，但是没有用。 我也对StackOverflow进行了研究，但找不到满意的结果。 请帮忙。

编辑：谢谢大家。 我找到了答案，这是我要标记的。 另外，请删除此问题，以免混淆其他人。

Answer 1

如果我假设您要在页面加载时执行此操作，请按以下步骤进行操作

注意1，自定义属性应具有data-前缀，并使用.dataset访问其值。

注意2，对于IE10及更低版本的旧版浏览器，您需要getAttribute （如下面的第二个示例所示）。

堆栈片段1

 <div id="candy" data-value="valueOfCandy"></div> <input id="candy2" type="text" value="" /> <script> document.getElementById('candy2').value = document.getElementById('candy').dataset.value </script> 

---

堆栈摘要2

 <div id="candy" data-value="valueOfCandy"></div> <input id="candy2" type="text" value="" /> <script> document.getElementById('candy2').value = document.getElementById('candy').getAttribute('data-value') </script> 

Answer 2

在代码之外但在对象存在之后用JavaScript进行。

这是如何实现此目的的示例：

 var candy = document.getElementById('candy').getAttribute('data-value'); document.getElementById('input').value = candy; 

 <div id="candy" data-value="valueOfCandy" ></div> <input id="input" type="text"/> 

如评论中所述，请确保标记后已加载JavaScript代码。 有多种方法可以做到这一点，包括等待dom加载。

请参见没有jQuery的$（document）.ready等效项，以及页面中脚本标记的位置如何影响其中定义的JavaScript函数？ 欲获得更多信息。

Answer 3

尝试这个

 document.getElementById('input').value = document.getElementById('candy').dataset.value 

 <div id="candy" data-value="valueOfCandy" ></div> <input id="input" type="text" value=""/> 

Answer 4

这不是您应该这样做的方式。

应该将JavaScript与HTML完全分开，以避免出现很多问题。 您正在尝试在HTML中包含JavaScript是20多年的技术，在我们制定标准之前就已经使用过。

接下来， div元素不能具有value属性。 value仅适用于表单字段。 但是，您可以创建一个data-*属性，该属性允许您创建自定义属性。 然后，您可以使用.dataset属性提取该值。

见下文：

 // This code would be placed inside of <script> and </script> tags and the whole // thing would be placed just before the closing body tag (</body>). document.getElementById("result").value = document.getElementById('candy').dataset.value; 

 <div id="candy" data-value="valueOfCandy"></div> <input type="text" id="result"> 

Answer 5

将该代码放在脚本标签或单独的js文件中。

此外，在需要操作DOM元素时，请始终绑定事件DOMContentLoaded 。

DOMContentLoaded

当初始HTML文档已完全加载和解析时，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件。 完全不同的事件加载应仅用于检测页面已满。 在DOMContentLoaded更合适的地方使用负载是一个非常普遍的错误，因此要谨慎。

这样，您的逻辑是完全一致的。

 document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); document.getElementById('candy2').value = document.getElementById('candy').getAttribute('value') }); 

 <div id="candy" value="valueOfCandy"></div> <input id="candy2" type="text" value="" /> 

建议使用data-attributes因为value属性与表单字段相关：

 document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); document.getElementById('candy2').value = document.getElementById('candy').dataset.value; }); 

 <div id="candy" data-value="valueOfCandy"></div> <input id="candy2" type="text" value="" />