Как ввести переменную в текстовое поле?

У меня есть условие if: если вы введете «[first_name]» в текстовое поле, результатом будет «Джон». Но если вы введете «Привет [имя_имя]», результатом будет «Привет [имя_имя]».

Вот код, я знаю, что если вы вводите только «[first_name]» в текстовое поле, он работает. Но как это исправить, если я напишу что-нибудь в текстовом поле, результатом будет то, что я пишу, а переменная «[first_name]» будет «Джон». Спасибо.

<p> Input [first_name] for variable </p>

<input id = "myInput" type = "text">

<button onclick = "myFunction()">Enter</button>

<p id = "result"></p>

function myFunction(){
    var input = document.getElementById("myInput").value;
    var myVar = "[first_name]"
    
    if (input == myVar){
        var data = document.getElementById('result').value= "John"
        document.getElementById("result").innerHTML = data;
    }
    else{
        document.getElementById("result").innerHTML = input
    }
}

Что я пробовал Поле ввода: Привет, [имя] Результат: Привет, [имя]

Чего я ожидаю Поле ввода: Привет, [имя] Результат: привет Джон

или что бы я ни написал в текстовом поле с переменной «[first_name]», это будет «Джон» и другой текст, который я пишу.

Поведение ключевого слова "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
76
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Вам необходимо немного изменить свой код JavaScript. Вместо сравнения всей входной строки с «[first_name]» вам следует проверить, присутствует ли «[first_name]» во входной строке, используя метод indexOf(). Вот измененный код:

function myFunction(){
    var input = document.getElementById("myInput").value;
    var myVar = "[first_name]";
    
    if (input.indexOf(myVar) !== -1){
        var data = input.replace(myVar, "John");
        document.getElementById("result").innerHTML = data;
    }
    else{
        document.getElementById("result").innerHTML = input;
    }
}
<p>Input [first_name] for variable</p>

<input id = "myInput" type = "text">

<button onclick = "myFunction()">Enter</button>

<p id = "result"></p>

Рассмотрите возможность использования .replaceAll

fdomn-m 08.03.2024 07:49

Я думаю, ты хочешь что-то вроде этого

function myFunction() {
  var input = document.getElementById("myInput").value;
  var myVar = "[first_name]";
  if (input == myVar) {
    var data = (document.getElementById("result").value = "John");
    document.getElementById("result").innerHTML = data;
  } else {
    document.getElementById("result").innerHTML = input.replace(
      myVar,
      "John"
    );
  }
}
<p>Input [first_name] for variable</p>
<input id = "myInput" type = "text" />
<button onclick = "myFunction()">Enter</button>
<p id = "result"></p>

надеюсь, это поможет

Рассмотрите возможность использования .replaceAll

fdomn-m 08.03.2024 07:48

Введите [first_name] для переменной

<input id = "myInput" type = "text"> 
<button onclick = "myFunction()">Enter</button> 
<p id = "result"></p>
function myFunction() {
  var input = document.getElementById("myInput").value;
  var myVar = "[first_name]";
  var result = input.replace(myVar, "John");
  document.getElementById("result").innerHTML = result;
}

Рассмотрим .replaceAll

fdomn-m 08.03.2024 07:48

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