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>it's a part of my code, it's a translator
it is supposed to work as I click the translate button then print the output in the textarea box but it doesn't what should I do make it work? I would appreciate the answer in any types very much
Your test variable didn't get updated when you press the button. I've changed the code a bit to give you the idea from where to start. Take a look:
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>