Cannot get string of input from variable - javascript

So as said in last question i was making some console shet for my other stuff and got into some problems
i wanted to get string from input to variable to split it but it does not get anything, it's clear :\
this was my variable code
var args = consoleInput.value.split(/(\s+)/)
and then i wanted to see it using console log like this
console.log(args)
but output is this
>[""]
And nothing else
JS:
const consoleInput = document.getElementById("input");
var args = consoleInput.value.split(/(\s+)/)
console.log(args)
HTML:
<div class="inputTextDiv">
<span id="inputText"></span><br>
</div>
<input type="text" placeholder="Insert Command ;P" id="input">

I suspect the reason you were seeing an empty array is because you were running your code while the input field was empty.
Here I've attached it to fire whenever the input field receives input:
document.querySelector('input').oninput = () => {
const consoleInput = document.getElementById("input");
var args = consoleInput.value.split(/(\s+)/)
console.log(args)
}
<div class="inputTextDiv">
<span id="inputText"></span><br>
</div>
<input type="text" placeholder="Insert Command ;P" id="input">
(I also suspect that your regex ought to be /\s+/ instead of /(\s+)/, unless you really want to be capturing the spaces as part of the array.)

Related

Javascript find and replace function using while loop

I have this simple function to find and replace text in my textarea message. User will be able to type into the textarea and also be able to find and replace words from the text area they just entered. Currently I'm trying to use a while loop to replace multiple same words found in the textarea that the user keyed in. But every time I run it it seems to freeze the entire html page any idea why this is happening?
find and replace are textbox for user to key in the word they want to find and replace the user is able to key in multiple words to replace as well.
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
while (message.indexOf(find) != -1) {
document.getElementById("message").value = message.replace(find, replace);
}
}
Replace while loop with a replaceAll.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
document.getElementById("message").value = message.replaceAll(find, replace);
}
<div>Find <input id="find" value="find" /></div>
<div>Replace <input id="replace" value="replace" /></div>
<div>
<textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea>
</div>
<div>
<button onclick="findText()">Submit</button>
</div>
Just a addition in other answer you can use g for global search and to replace where you find that word .
Read more about regex and //g here
Also you can let the search case-insensitivity using i along with g like this :
message.replace(/find/g, replace)
This way it will also replace Find finD FIND
And instead of using while you can use if loop
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
if(message.indexOf(find) != -1) {
document.getElementById("message").value = message.replace(/find/g, replace);
}
}
<div>Find <input id="find" value="find" /></div>
<div>Replace <input id="replace" value="replace" /></div>
<div>
<textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea>
</div>
<div>
<button onclick="findText()">Submit</button>
</div>
The issue is with your while condition. When all input fields are empty your while condition is true. So inside the while condition the input value keeps on updating to empty string again, which makes loop an infinite loop. Thats why your ui is breaking.
Issue Scenario
console.log(("").indexOf("") !== -1);
To fix this, you have to make sure that your find and replace values are not same. Or else, it will be an infinite loop again.
Fixed Solution
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message');
while (find !== replace && message.value.indexOf(find) != -1) {
message.value = message.value.replace(find, replace);
}
}
<input type="text" id="find">
<input type="text" id="replace">
<textarea name="" id="message" cols="30" rows="10"></textarea>
<button onclick="findText()">Check</button>

Cannot Read Property Split of Undefined for text input

I am trying to build a text to morse code translator, and when trying to take the input value which is a string and turn it into an array of letters, I get this error.
var inputValue = getInputValue();
var inputValueLetters = inputValue.split();
function getInputValue(){
// Selecting the input element and get its value
var inputVal = document.querySelector("#myInput").value;
// Displaying the value
console.log(inputVal);
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Text Input Field Value in JavaScript</title>
</head>
<body>
<h1>Morsi: Translate Plain Text Into Morse Code</h1>
<input type="text" placeholder="Type something..." id="myInput">
<button type="button" onclick="getInputValue();">Get Value</button>
<script src="morsi.js"></script>
</body>
</html>
You called function "getInputValue" at first line of your script.
var inputValue = getInputValue();
This function return undefined, and then you are trying to call .split method of undefined and got that error.
If you remove first two lines of your script - you will got no error.
If you need some additional logic, and not just print input value to console, then you need to place this logic in function getInputValue after reading value of input. Like:
function getInputValue(){
// Selecting the input element and get its value
var inputVal = document.querySelector("#myInput").value;
// Displaying the value
console.log(inputVal);
const letters = inputVal.split('');
console.log(letters);
};
Also, check that i used empty string argument in split function to split value by letters. If you don't do it you will have array with only one element,that is whole input value
This line :
var inputValue = getInputValue();
Is assigning whatever the function getInputValue(); return to the variable inputValue
That function is return undefined which is basically nothing, because there's no return statement inside it, So the second line becomes like this:
var inputValueLetters = undefined.split();
The error you get Cannot read property 'split' of undefined" is clear enough undefined is nothing and nothing has nothing so how can you expect nothing to have split().
What you want is only when the button is clicked get the value of the input then call split() on that value.
Also if you want to split the text into an array of letters you need to tell the split function by which char it want it to split a space or a forward slash (/) etc..
In our case it's nothing so we pass an empty string ""
function getInputValue() {
// Selecting the input element and get its value
var inputValue = document.querySelector("#myInput").value;
var inputValueLetters = inputValue.split("");
// Displaying the value
console.log(inputValueLetters);
};
<h1>Morsi: Translate Plain Text Into Morse Code</h1>
<input type="text" placeholder="Type something..." id="myInput" value="text">
<button type="button" onclick="getInputValue();">Get Value</button>
You have to use .split('')
const hello = 'hello'
console.log(hello.split())
console.log(hello.split(''))

How do I set the value of a variable to the user input in an input field?

I am creating a random password generator and I would like the user to be able to set the desired length of their password. I have an input field for the user to put their desired length, and I would like to store their input in a variable. I have tried several stack overflow solutions, none of which have worked.
Here is what I have right now for the HTML:
<div id = "pswrdLngth">
<div class = "text-center">
<p>Desired password length:</p>
<input type="text" id = "lengthValue" name="userInput" size="25" placeholder="Enter a # between 8-128">
</div>
</div>
and the JavaScript:
var lengthValue = document.querySelector("#lengthValue");
var passwordLength = lengthValue.value;
$(".buttonTwo").on("click", function() {
console.log(passwordLength);
} )
The console is returning an empty line when buttonTwo is clicked. I have also tried using "lengthValue.val()" for the function passwordLength, but the console error read: ".val() is not a function." Any suggestions? Thank you in advance.
const myFunction = () => {
var lengthValue = document.querySelector("#lengthValue");
var passwordLength = lengthValue.value;
console.log(passwordLength)
}
html:
<div id = "pswrdLngth">
<div class = "text-center">
<p>Desired password length:</p>
<input type="text" id = "lengthValue" name="userInput" size="25" placeholder="Enter a # between 8-128" onchange="myFunction()">
</div>
</div>
I made an onchange function which will store the value everytime the input changes.
You can add the Event Listener like this:
var lengthValue = document.getElementById("lengthValue");
var passwordLength = lengthValue.value;
document.getElementById('buttonTwo').addEventListener("click", function() {
console.log(passwordLength);
} )
This should work if the HTML for buttonTwo has an id called "buttonTwo", like this:
<input type="button" id="buttonTwo">

Getting html textarea with Node JS express returns undefined

I'm trying to get input from the following textareas and turn it into a bunch of keywords
<form method="POST" action ="/input" enctype="text/plain">
<p>Enter the keywords you would like first with spaces in between</p>
<textarea name ="keys1" id="editBox" rows="5" cols="5"></textarea>
<p>Enter the keywords you would like second with spaces in between</p>
<textarea name ="keys2" id="editBox" rows="5" cols="5"></textarea>
<button type="submit">Submit</button>
</form>
However whenever I run the following code (see below) I get the error TypeError: Cannot read property 'keys1' of undefined. How do I fix it? I looked at some other questions but their solutions don't really work (or I don't understand them).
Code that returns the error:
app.post('/input', function(req, res) {
var firstkey = req.body.keys1;
var secondkey= req.body.keys2;
var keylist1 = firstkey.split("+");
var keylist2 = secondkey.split("+");
if(keylist1.length>0 && keylist2.lenght>0){
var output = [];
for(i=0; i<keylist1.length; i++){
for(j=0; j<keylist2.length;j++){
output.push(keylist1[i]+" " + keylist2[j]);
}
}
res.send('Upload more<br>' + output.join('<br>'));
}
});

Clilcking on a button is giving a Bad Path error

I'm trying to make a pen which incorporates the javascript exercises I'm learning. Here is the Pen: https://codepen.io/ychalfari/pen/JVYoNW
In this specific case I'm trying to accept an array from an input and run a function which sums the array when you click the button, and the result should show underneath.
When I click the button I either get an Error: "Bad Path /boomboom/index.html"
or nothing happens the page just kind of reloads and it takes me to the top of the page.
The HTML
<form id="sum-arr-form">
<div class="form-wrap" >
<label for="arr-to-sum"> Enter an Array to sum: <input id="arr-to-sum" class ="med-input" type="text" value = "">
<button class="btn1" onclick ="sumOfArray()">submit</div> </form>
<p>Result: <span id="demo"></span></p>
The Javascript
let inputArr = document.getElementById('arr-to-sum').value;
const add = (a,b) => a+b;
const sumOfArray = function() {
let sum = inputArr.reduce(add);
document.getElementById("demo").innerHTML = sum;};
You have some mistakes in your code.(button tag without type will trigger submit)
<button class="btn1" onclick ="sumOfArray()">submit
change this line to
<input type="button "class="btn1" onclick ="sumOfArray()" value="submit">
then get the value of input inside your sumOfArray function. (add the below 2 lines in your sumOfArray function) (waynelpu's answer above)
let inputArrStr = document.getElementById('arr-to-sum').value;
let inputArr = JSON.parse(inputArrStr);
The value get from input is string, if you want to process it as array you need to convert to correct type in js, try
let inputArrStr = document.getElementById('arr-to-sum').value;
let inputArr = JSON.parse(inputArrStr);

Categories