#javascript #html
Вопрос:
document.addEventListener('DOMContentLoaded', function() {
var test = document.getElementById("myText").value;
var mapObj = {
A: 'Eh'
};
test = test.replace(/A/g,
function(matched) {
return mapObj[matched];
})
var check = document.getElementById("check");
check.addEventListener('click', function() {
document.getElementById('demo').innerText = test;
}, false);
}, false);
BODY {
width: 520px;
min-height: 250px;
}
<html>
<body>
<textarea rows="10" cols="50" id="myText"></textarea>
<button id="check">translate</button>
<textarea rows="10" cols="50" id='demo' readonly><p id='demo'></p></textarea>
</body>
</html>
это часть моего кода, это переводчик
он должен работать, когда я нажимаю кнопку «Перевести», а затем печатаю вывод в поле «Область текста», но это не так, что я должен сделать, чтобы он работал? Я был бы очень признателен за ответ в любых типах
Комментарии:
1. Вы задаете
test
время загрузки страницы, а не когда пользователь вводит что-то в текстовую область и нажимаетtranslate
кнопку.2. У тебя их два
id="demo"
. Идентификаторы должны быть уникальными.3. Чтобы изменить содержимое текстовой области, вы должны назначить ее
value
, а неinnerText
.
Ответ №1:
Ваша тестовая переменная не обновлялась при нажатии кнопки. Я немного изменил код, чтобы дать вам представление о том, с чего начать. Посмотри:
document.addEventListener('DOMContentLoaded', function() {
var check = document.getElementById("check");
check.addEventListener('click', function() {
var test = document.getElementById("myText").value;
var mapObj = {
A: 'Eh'
};
test = test.replace(/A/g,
function(matched) {
return mapObj[matched];
})
document.getElementById('demo').innerText = test;
}, false);
}, false);
BODY {
width: 520px;
min-height: 250px;
}
<html>
<body>
<textarea rows="10" cols="50" id="myText">Type "A" and press translate.</textarea>
<button id="check">translate</button>
<textarea rows="10" cols="50" id='demo' readonly></textarea>
</body>
</html>