Text input command aguments - javascript

How would I make commands for an input tag. For example, when you type !echo 'test' in an text input it would edit the content of a p tag
I tried this
<input type="text id="input" onchange="update()"/>
<p id="output"></p>
function update(){
var x = document.getElementById("input").value;
if(x == "!echo ", args){
document.getElementById("output").innerHTML = x;
}
}

If I understand the question correctly, you want to show the text that appears after the command "!echo". You're very close to getting it done. I've used the startWith method on the string of x to ensure the '!echo' command is at the beginning of the input. If that's true then we strip off the command using the replace method. I hope that's what you're looking for.
function update(){
var x = document.getElementById("input").value;
if (x.startsWith("!echo ")) {
document.getElementById("output").innerHTML = x.replace('!echo ', '');
}
}
<input type="text" id="input" onchange="update()"/>
<p id="output"></p>

Your question is unclear AMO.
Here's the result if you type !echo 'test' in your input tag.
If that's not the result your expect please update your question.
Feel free to add more details if it's not the goal you want.
I don't understand exactly what You want to do...
Have a nice day.
<input type="text" id="input" onKeyUp="update('\'test\'')">
<p id="output"></p>
function update(args){
var x = document.getElementById("input").value;
if(x == "!echo "+ args){
document.getElementById("output").innerHTML = x;
}else{
document.getElementById("output").innerHTML ="";
}
}

Related

How can I remove spaces, punctuation and symbol from my text

I am building an app whereby I have to make some conversions to an input string. I need to remove whitespaces, punctuation and make everything down-cased. I do not get any output when I try to test it.
Further, I need to ensure that more than one word is entered and at Least 60 characters in the input box.
const text = document.querySelector('#normalized_text');
const string = document.querySelector('#message');
function encodeMessage() {
let newMessage = string.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
console.log(newMessage);
text.innerHTML = newMessage;
return newMessage;
}
<form>
<input type="text" placeholder="Type your secret message" id="message">
</form>
<button type="submit" class="button" onclick="encodeMessage()">Encode message</button>
<div class="box">
<h3>Normalised Text</h3>
<p id="normalized_text"></p>
</div>
Currently, you're not replacing the value of the object 'string' but rather just the object. If you check your developer console, you will find an error message. I recommend using the developer console (by going to Inspect Element) as much as possible when creating a webpage because it can show the errors in your script.
You should change your JavaScript code to the following:
const text = document.querySelector('#normalized_text');
const string = document.querySelector('#message');
function encodeMessage() {
let newMessage = string.value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
text.innerHTML = newMessage;
return newMessage;
}
A few issues here:
1- As pointed out by #epascarello, your button is of type submit, which by default refreshes the page. We do not want that in the case, so simply make your button to be of the type button.
2- You are trying to manipulate the object string, not its value! try working with string.value instead.
Regarding the word count checking, you can split the string by the space character and check the resulting array's length.
const text = document.querySelector('#normalized_text');
const str = document.querySelector('#message');
function encodeMessage() {
var message = str.value;
if(getWordCount(message) < 2 || message.length < 60) {
console.log("Invalid message.");
return null;
}
let newMessage = str.value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
console.log(newMessage);
text.innerHTML = newMessage;
return newMessage;
}
//gets word count of a string
function getWordCount(s) {
return s.split(" ").length;
}
<form>
<input type="text" placeholder="Type your secret message" id="message">
</form>
<button type="button" class="button" onclick="encodeMessage()">Encode message</button>
<div class="box">
<h3>Normalised Text</h3>
<p id="normalized_text"></p>
</div>

Javascript - text input to icon

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>
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, i.e, 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>

Count characters in textfield on keydown event

I want to live update the amount of characters entered in a textfield as the user puts them in. I am not getting too far. This is what I have so far. It changes to zero. I'm rather new to javascript to a beginner explanation would be great.
function doThis() {
x = document.getElementById("area").textContent;
y = x.length;
document.getElementById("demo").innerHTML = y;
}
<textarea id="area" onkeydown="doThis()"></textarea>
<p id="demo">Count goes here</p>
To get the content of the textarea use .value and change the event to onkeyup.
function doThis() {
x = document.getElementById("area").value;
y = x.length;
document.getElementById("demo").innerHTML = y;
}
<textarea id="area" onkeyup="doThis()"></textarea>
<p id="demo">Count goes here</p>
Alternative answer with .querySelector() and less code:
document.querySelector('#area').onkeyup = function() {
document.querySelector('#demo').innerHTML = this.value.length;
}
<textarea id="area"></textarea>
<p id="demo">Count goes here</p>
instead of textcontent use value and if you want to use keydown, add +1
function doThis() {
x = document.getElementById("area").value;
y = x.length + 1;
document.getElementById("demo").innerHTML = y;
}
<textarea id="area" onkeydown="doThis()"></textarea>
<p id="demo">Count goes here</p>
note: if you copy and paste it will give you wrong result, so better to use onkeyup

Having trouble with input and output in Javascript

I have recently started doing my own project with javascript and I ran into a roadblock. I'm doing a reverse string project where the user inputs a string and the output reverses it. Now my problem is that I can't get the reverse string to show up in the output area.
The Javascript part:
<script>
function pass() {
var input = document.getElementById('inputfield');
var output = document.getElementById('results');
var string = input.value;
var reverse = function (string) {
return string.split('').reverse().join('');
};
output.innerHTML = reverse;
}
</script>
The HTML:
<div id="reverse">
<h1>Type Below:</h1>
<form name="form">
<input type="text" name="inputfield" id="inputfield">
<button onClick="pass();">Submit</button></br>
<input type="text" name="out" placeholder="results" id="results">
</form>
</div>
You need to call the function.
output.value = reverse(input.value);
Luis,
When creating one function that receive an parameter, never forget to send this parameter.
In this case:
output.innerHTML = reverse(yourparameter);
Regards.
you will get reversed string like this:
output.innerHTML = reverse(string);
because
var reverse = function (string) {
return string.split('').reverse().join('');
};
is just a function declaration, the string is only a parameter of the function, but not equal to
var string = input.value;

Check if TextArea/TextBox contains a certain String

Given textarea is a textarea element with id 'textareabox', how can I check if it contains a string within it?
var textarea = document.getElementById('textareabox');
var word = something;
if (!textarea.contains(word))
{
textarea.value += word;
}
You can use .value, as:
var textarea = document.getElementById('textareabox');
var word = 'something';
var textValue=textarea.value; //-> don't use .innerHTML since there is no HTML in a textarea element
if (textValue.indexOf(word)!=-1)
{
alert('found')
}
You could do something like this:
var textarea = document.getElementById('textareabox').value;
if (texarea.match(word) != null) {
// do some stuff
}
A better regex than what I did but I don't know regex all that well (forgive me regex ignorance).
body {
background-color: red;
}
<html>
<h1>#mywebsite</h1>
<body>1+1=2?(yes <strong>or</strong> no)</body>
<input type="text" id="text" placeholder="text here"></input>
<button type="button" id="u" onclick="run()">submit</button>
<script type="text/javascript">
var a = 1;
function run() {
if (document.getElementById("text").value.includes("yes")) {
alert("correct!");
/*if the textbox includes "yes" it will say you got it right; basically whatever the input your user puts into the textbox it will test if the users sentence contains "yes" it alerts "correct!" into html if its wrong well it alerts "Try again!" the thing is, no matter what, if yes is in the sentance it will still say its correct.*/
/*if the snippet will not work use a different website to put code on */
document.body.innerHTML += "<li>attempt #" + a + ": correct";
a++
}
else {
alert("try again!")
document.body.innerHTML += "<li>attempt #" + a + ": try again";
a++
}
}
</script>

Categories