Having trouble with input and output in Javascript - 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;

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>

set img as value for input type='text'?

<input type='text' id='txt'>
<input type='button' id='btn' onclick='upv()' value='01'>
<script>
function upv()
{
document.getElementById("txt").value +="<IMG SRC='pics/smile/01.png'>";
}
</script>
I am trying to make a function with js, it means that if a user clicks on an image , make input `value+= 'img'', I tried it with different ways and can't do it!
can any one suggest a solution?
You Can Get Image Name By using following Function
function getName() {
var fullPath = document.getElementById("img1").src;
var filename = fullPath.replace(/^.*[\\\/]/, '');
// or, try this,
// var filename = fullPath.split("/").pop();
document.getElementById("result").value = filename;}

Converting an integer into a string array and outputting it

I want to change my input an Integer into a String array. I used javascript to write such a function but unfortunately it doesnt work. I tried everything i know but i have no clue what i did wrong. Would appreciate some help/explanations etc. Here is the code.
<script type="text/javascript">
function convert() {
var umge = document.getElementbyId('eingabe').value;
if(umge == 0005010) {
var aus = {"Maria", "Nord", "1a", "VS Langenzersdorf"};
var myJSON = JSON.stringify(aus);
document.getElementById('output').innerHTML = myJSON;
document.getElementById('input').innerHTML = "";
}
}
</script>
</head>
<body bgcolor="orange">
<form action="" method="post">
<input type="text" name="input" id="input" value="0005010">
<input type="submit" value="Umwandeln" onclick="convert();">
<p name="output" id="output"> Kein Wert</p>
</form>
</body>
</html>
Other than the problems mentioned in the comments, your declaration of aus is wrong: an object should be {k1:"v2"} and an array should be ["v1","v2"].
Also, your input box is type text, so its value is a string, not a number, so you need to compare it to a string. I cleaned up your code into something runnable here : https://plnkr.co/edit/Sny3LuBDGh0ZKHY0lSWx?p=preview
Basically you should either do this :
var umge = document.getElementById('input').value;
if(umge == "0005010") { .... }
Or something like this :
var umge = parseInt(document.getElementById('input').value);
if(umge == 5010) { .... } // note - no leading 0s!

Printing or Echoing message in html page from javascript

I have the following script
function validateEmailp() {
var messagemail = document.getElementById('emailerrorz').innerText;
var two = document.getElementById('email').value;
var first = two.split("#")[1];
var badEmails = ["gmail.com", "yahoo.com"]
if (badEmails.indexOf(first) != -1) {
document.getElementById("email").value = ""; //this works
messagemail = 'We do not accept free e-mails'; //this doesn't
return false;
}
return true;
}
and HTML
<td>{EMAILFIELD}<span id="emailerrorz"></span></td>
and {EMAILFIELD} is in PHP
<input id="email" class="txt" type="text" name="email" size="25" value="" maxlength="255" onblur="validateEmailp()"></input>
But it doesn't work for me on printing the error in the span id. It only works on resetting the value from there.
When you do var messagemail = document.getElementById('emailerrorz').innerText; your variable stores a string with that content.
When you var messagemail = document.getElementById('emailerrorz'); your variable stores a object/element and then you can use the property .innerText
So use:
var messagemail = document.getElementById('emailerrorz');
// rest of code
messagemail.innerText = 'We do not accept free e-mails';
Properties don't work this way. You want:
document.getElementById('emailerrorz').innerText = 'We do not accept free e-mails'
or
var messagemail = document.getElementById('emailerrorz');
....
messagemail.innerText = etc
http://jsfiddle.net/MJXEg/

trouble with a currency converter in javascript

Im having trouble with this javascript. here is a n example
window.onload = initPage;
var euro;
var convert;
function initPage()
{
document.getElementById("convertButton").onclick = calcAnswer();
document.getElementById("conversionType").onchange = calcAnswer();
}
function calcAnswer()
{
//alert(document.getElementById("conversionType").value);
var value1 = document.getElementById("amount").value;
var conversionType = document.getElementById("conversionType").value;
//alert(conversionType);
if(var value = document.getElementById("conversionType").value=="polish");
document.getElementById("answer").value=(value1-32)/9*5;
else
document.getElementById("answer").value=value1*9/5+32;
}
here is the html
<h1>Currency Converter</h1>
<form name="convert">
Choose which currency you would like to convert to the Euro:
<select id="conversionType">
<option value="polish">Polish Zloty</option>
<option value="ukraine">Ukraine Hryvnia</option>
</select>
</br>
</br>
<hr>
Amount:<input id="amount" type="text" />
<input id="convertButton" type="button" value="Convert->"/>
To:
<input id="answer" type="text" name="answer" readonly="readonly"/>
</form>
im using an old temperature converter and havent changed that part part but even that part is not working.
For starters, these two lines are wrong:
document.getElementById("convertButton").onclick = calcAnswer();
document.getElementById("conversionType").onchange = calcAnswer();
Change them to:
document.getElementById("convertButton").onclick = calcAnswer;
document.getElementById("conversionType").onchange = calcAnswer;
You want to assign a function reference to onclick and onchange, not actually call the function and assign the return value.
Then, fix the if statement in calcAnswer like this:
function calcAnswer()
{
var amount = document.getElementById("amount").value;
var conversionType = document.getElementById("conversionType").value;
var answerElement = document.getElementById("answer");
//alert(conversionType);
if(conversionType == "polish") {
answerElement.value = (amount-32)/9*5;
} else {
answerElement.value = amount*9/5+32;
}
}
Should be
document.getElementById("convertButton").onclick = calcAnswer;
document.getElementById("conversionType").onchange = calcAnswer;
(without the parens)
You just need to reference the function, not execute it.

Categories