Блог

Я хотел бы вставить элемент, взятый из класса «iti__selected-dial-code», в качестве значения в тег. Я сделал это для

тег, но у меня проблема с тегом.

Мой входной тег: <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

 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()