Javascript - text input to icon
Question
I am trying to create a simple web application. Like in Facebook chat when I enter "(Y)" it turns into the thumbs up icon. Similarly I am trying to do something like that with the following code. But it is not working for me. I am not expert with JavaScript. I need some help that what's wrong with the code?
And I made the code in a way that if i enter "y" it will return LIKE. I want to know how to show an icon after "y" input.
<html>
<head>
<title>Emogic</title>
</head>
<body>
<input type="text" id="input">
<input onclick="appear()" type="submit">
<p id="output"></p>
<script>
function appear(){
var value = document.getElementByid("input").value
var result = document.getElementById("output").innerHTML
if(value == "y"){
result = "LIKE"
}
else if(value == ""){
alert("You must enter a valid character.");
}
else{
alert("Character not recognised.");
}
}
</script>
</body>
</html>
1 answers
solution1
0 2015-10-27 02:10:47
There are a few issues/typo in your code :
it's document.getElementById() , with a capital I in Id .
result will be a string, containing the innerHTML of your element, but not a pointer to this innerHTML : when you then set result to an other value, it won't change the element's innerHTML as you expected. So you need to create a pointer to the element, and then set its innerHTML from the pointer.
The quick fix of your code would then be :
function appear() { var value = document.getElementById("input").value; var output = document.getElementById("output"); if (value == "y") { output.innerHTML = "LIKE"; } else if (value == "") { alert("You must enter a valid character."); } else { alert("Character not recognised."); } }
<input type="text" id="input" value="y"> <input onclick="appear()" type="submit"> <p id="output"></p>
But you'll find out that your user will have to enter exactly "y" and only "y" for it to work.
I think you should use instead String.replace() method with a regular expression to get all occurences of a pattern, ie, for "(Y)" it could be
function appear() { var value = document.getElementById("input").value; var output = document.getElementById("output"); // The Regular Expression we're after var reg = /\\(Y\\)/g; // your replacement string var replacement = 'LIKE'; // if we found one or more times the pattern if (value.match(reg).length > 0) { output.innerHTML = value.replace(reg, replacement); } else if (value == "") { alert("You must enter a valid character."); } else { alert("Character not recognised."); } }
<input type="text" id="input" value="I (Y) it (Y) that"> <input onclick="appear()" type="submit"> <p id="output"></p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.