CODEWITHSUNDEEP
javascripthtml
Hubu999
Hubu999

Reputation: 83

How to put value to the input tag

I would like to insert the element taken from the "iti__selected-dial-code" class as a value into the tag. I did this for the

tag but I have a problem with the tag.

My input tag: <input type="tel" id="phone" class="tell" name="telephone" value="">

And js code:

var input = document.querySelector("#phone");
var iti = window.intlTelInput(input, {
    separateDialCode: true,
    utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/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;

To make the problem easier to understand, I created a codepen: https://codepen.io/hubu999/pen/qBaOrjL

Upvotes: 0

Views: 92

Answers (1)

Nikas music and gaming
Nikas music and gaming

Reputation: 1272

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});

Please see this: MutationObserver.observe()

Upvotes: 1

Related Questions