How to turn an input text-value into an object's property value in Js?

Question

I turned the input text-value into the inp1 var but once I want to call it inside the obj it doesn't work.

<input type="text" placeholder="Enter your text here" class="input fade-in" id="inp1" required>

 var inp1 = document.getElementById("inp1").value;

$(function(){
  $('#qrcode').qrcode({
    width: 150,
    height: 150,
    text: "https://www.stackoverflow.com/" + inp1
  });
});

I expect the qrcode code to show the url + the text of the input

Answer 1

Your code runs once, when the page loads. At that time, the input field is yet empty. Instead you probably want to update the qr code whenever the input changes. You need an event listener for that:

 $(function(){
   var input = $("#inp1"); // if you use jQuery, use it everywhere. Also retrieve the element when the document loaded

   input.on("change", function() { // listen for input changes
     $('#qrcode').qrcode({ // then update the qr code
       width: 150,
       height: 150,
       text: "https://www.stackoverflow.com/" + input.val(),
     });
   });
 });

You might want to consider using the input event instead of the change event depending on your usecase.