Как превратить входное текстовое значение в значение свойства объекта в Js?

Я превратил входное текстовое значение в переменную inp1, но как только я хочу вызвать его внутри объекта, он не работает.

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

Я ожидаю, что код qrcode покажет URL + текст ввода

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш код работает один раз, когда страница загружается. В это время поле ввода еще пусто. Вместо этого вы, вероятно, захотите обновить изменения кода qr всякий раз, когда ввод. Для этого вам нужен прослушиватель событий:

 $(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(),
     });
   });
 });

Возможно, вы захотите рассмотреть возможность использования событие ввода вместо события изменения в зависимости от вашего варианта использования.

Странно то, что страница библиотеки имеет точно такой же пример, который ищет OP.

Alon Eitan 06.07.2019 19:20

Документация нередко содержит ошибки.

Scott Marcus 06.07.2019 19:23

@ScottMarcus Этот пример работает просто отлично и обновляет qrcode, как и ожидалось (я имею в виду, что на самом деле я его не сканировал, но я видел, что он меняется)

Alon Eitan 06.07.2019 19:24

@AlonEitan, это не та библиотека, которую я использую. Эта библиотека не работает

codeworking 06.07.2019 19:26

Почему это дает мне эту ошибку: Uncaught SyntaxError: отсутствует) после списка аргументов

codeworking 06.07.2019 19:37

@codeworking Тогда это эта библиотека? Потому что, если это так, когда вы запускаете $('#qrcode').qrcode() несколько раз, он добавляет новый qrcode, а не заменяет старый. Если это произойдет с вами, вам следует изменить код на $('#qrcode').empty().qrcode({ .... }); (обратите внимание на empty(), который я добавил)

Alon Eitan 06.07.2019 19:37

@AlonEitan, вы можете найти библиотеку здесь codepen.io/ризопулос/pen/KWjmQx

codeworking 06.07.2019 19:44

@codeworking Да, значит, у него та проблема, о которой я говорил, проверьте эта рабочий пример. Вы видите 2 qrcode в первой оболочке и только один во второй, потому что я добавил empty()

Alon Eitan 06.07.2019 19:47

@AlonEitan хорошо, это работает! Так что в основном это библиотека jquery.qrcode.js. Где в документации говорится о empty() ?

codeworking 06.07.2019 20:11

@codeworking Нигде, я только что проверил эту библиотеку и заметил ее, поэтому я подумал, что дам вам знать заранее

Alon Eitan 06.07.2019 20:13

Хорошо, спасибо Алону и Йонасу за терпение.

codeworking 06.07.2019 20:22

Другие вопросы по теме