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="" />