如何給輸入標簽賦值

Question

我想將取自“iti__selected-dial-code”class 的元素作為值插入到標簽中。 我這樣做是為了

標簽，但我對標簽有疑問。

我的輸入標簽： <input type="tel" id="phone" class="tell" name="telephone" value="">

和js代碼：

var input = document.querySelector("#phone");
var iti = window.intlTelInput(input, {
    separateDialCode: true,
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/js/utils.js",
});

window.iti = iti;
var code = document.getElementsByClassName("iti__selected-dial-code").item(0).innerHTML;


//It works for <p> tag.

var prefix = document.getElementById("prefix");
prefix.innerText = code;

//I would like it to work as above, so that the prefix moves to the input instead of a <p>.

var phoneNumber = document.getElementById("phone");
phoneNumber.innerText = code;

為了讓問題更容易理解，我創建了一個codepen： https://codepen.io/hubu999/pen/qBaOrjL

Answer 1

var elem = document.getElementsByClassName("iti__selected-dial-code").item(0);

var phoneNumber = document.getElementById("phone");
phoneNumber.value = elem.innerHTML;

observer = new MutationObserver(function(mutationsList, observer) {
    console.log(mutationsList);
  phoneNumber.value = elem.innerHTML;
});

// call `observe` on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elem, {characterData: true, childList: true, attributes: false});

請看這個： MutationObserver.observe()