JavaScript alert onclick onchange if statement - javascript

I am trying to display an onclick alert if the box is filled in with the world "hello", while a different alert should pop up in "hello" is not typed.
Not sure what I am doing wrong here:
The HTML:
<form>
<input id="box" placeholder="type hello" onchange="sayHello()" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
HELLO
</p>
</form>
The JavaScript:
function sayHello() {
var answer = "hello";
if (answer) {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}
function sayHelloTwo() {
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").style.color = "#909090";
document.getElementById("hidden").style.fontSize = "40px";
}

You need to check the actual value that the user entered in the box, and then compare it to the value you want (the value inside your answer variable).
There are several ways to do so, one of the is using
document.getElementById('box').value
(Where box is the id of your element).
Here is a working example:
function sayHello() {
var answer = "hello";
var text = document.getElementById('box').value;
if (text == answer) {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}
function sayHelloTwo() {
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").style.color = "#909090";
document.getElementById("hidden").style.fontSize = "40px";
}
<form>
<input id="box" placeholder="type hello" onchange="sayHello()" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
HELLO
</p>
</form>

To elaborate on Dekels answer some more, the click event also has an event property attached to it that you can use to get the value, like this.
function sayHello(e) {
if (e.currentTarget.value == "hello") {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}

You have error in checking condition for answer
function sayHello() {
var answer = "hello";
if (answer == "hello") {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}

You can pass the element value directly as a parameter this.value in your html.
Notice that to make the code case insensitive you must convert the value to lowercase and than check the if statement value.toLowerCase() !== 'hello'
Code:
function sayHello(value) {
if (value.toLowerCase() !== 'hello') {
alert('You need to type hello!');
return false;
}
alert('Click for Hello!');
}
function sayHelloTwo() {
var hidden = document.getElementById('hidden')
hidden.style.display = 'block';
hidden.style.color = '#909090';
hidden.style.fontSize = '40px';
}
<form>
<input id="box" placeholder="type hello" onchange="sayHello(this.value)" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
HELLO
</p>
</form>

Related

How do I execute a JS function on form submit based on commands entered in text input?

How do I take this form and execute certain functions when a specific text is entered to trigger the event?
<form id="form">
<input type="text" placeholder="Enter Command" id="text" />
<input type="button" value="Submit" id="submit" />
</form>
function RUN() {
// when run is entered in text field this function is exe
}
function CLOSE() {
// when close is entered in text field this function is exe
}
example commands: RUN and CLOSE
EDIT something i got kinda working:
How do I make multiple commands exe different functions? This works without the second or third command added. Once I add multiple the only one that works is the one at the bottom.
function readCommand() {
let readInput = document.querySelector('#SearchBar').value
// ↓ no .value, it's already here -----------↑
if (readInput === 'RUN') {
// ↑ === vs =
CMDRUN()
} else {
alert(`Not a command`);
}
}
function readCommand() {
let readInput = document.querySelector('#SearchBar').value
// ↓ no .value, it's already here -----------↑
if (readInput === 'CLOSE') {
// ↑ === vs =
CMDCLOSE()
} else {
alert(`Not a command`);
}
}
function CMDRUN() {
alert ("This is an alert dialog box 1");
}
function CMDCLOSE() {
alert ("This is an alert dialog box 2");
}
This can be done using an onsubmit event along with the window object to call a function using the string input.
When the form is submitted, the value of the input box is the function that will be executed.
document.getElementById("form").onsubmit = function() {
window[document.getElementById("text").value]();
}
function RUN() {
// when run is entered in text field this function is exe
}
function CLOSE() {
// when close is entered in text field this function is exe
}
<form id="form" action="">
<input type="text" placeholder="Enter Command" id="text" />
<input type="submit" value="Submit" id="submit" />
</form>
function readCommand() {
let readInput = document.querySelector('#SearchBar').value
if (readInput === 'RUN') {
CMDRUN()
} else if (readInput === 'CLOSE') {
CMDCLOSE()
} else {
alert(`Not a command`);
}
}
function CMDRUN() {
alert ("This is an alert dialog box 1");
}
function CMDCLOSE() {
alert ("This is an alert dialog box 2");
}
<form name="SearchContainer" id="SearchContainer" class="WindowMenuUp">
<input type="text" placeholder="Search and Commands" name="SearchBar" id="SearchBar" class="SearchBar" />
<input type="button" value="Search" name="SearchButton" id="SearchButton" class="SearchButton" onclick="readCommand()" />
</form>

How to connect JS functions to checkbox

Hello,
I am making a simple text changer website where I want the user to be able to select what options to use. Right now I have two options; myConvertOption which capitalizes every odd letter in a word and I have myScrambleOption which randomly mixes up each word a bit.
Right now whenever you click on Caps (checkbox_1) it already executes the function where I only want it to execute whenever the user clicks on the "Convert" button + it also puts spaces in between each letter now.
The Scramble button (checkbox_2) doesn't do anything for some reason, except for console logging the change.
JSfiddle: https://jsfiddle.net/MysteriousDuck/hLjytr2p/1/
Any help and suggestions will be greatly appreciated!
P.S I am new to Javascript.
Checkbox event listeners:
checkbox_1.addEventListener('change', function () {
console.log("checkbox_1 changed");
if (this.checked) {
myConvertFunction();
} else {
//Do nothing
}
})
checkbox_2.addEventListener('change', function () {
console.log("checkbox_2 changed");
if (this.checked) {
myScrambleFunction(text);
} else {
//Do nothing
}
})
Checkbox HTML:
<div class="checkbox">
<input type="checkbox" id="checkbox_1" >
<label for="checkbox_1">Caps</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox_2" >
<label for="checkbox_2">Scramble</label>
</div>
this works properly..
You just had to add the event on the button and then test which check box was checked, and other little things
<!doctype html>
<html>
<head>
</head>
<body>
<div class="container">
<h1> Text Changer </h1>
<h2> CAPS + randomize letters text changer</h2>
<div class="checkbox">
<input type="checkbox" id="checkbox_1">
<label for="checkbox_1">Caps</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox_2">
<label for="checkbox_2">Scramble</label>
</div>
<textarea type="text" autofocus="true" placeholder="input text" id="inputText" value="Input Value" spellcheck="false" style="width: 300px;"></textarea>
<button class="button button1" id="convertText">Convert</button>
<textarea type="text" placeholder="converted text" id="convertedText" value="Clear" readonly="true" spellcheck="false" style="width: 300px;"></textarea>
<button class="button button1" id="copyText">Copy</button>
</div>
<script>
var text = document.getElementById("inputText").value;
var convertText = document.getElementById("convertText");
var checkbox_2 = document.getElementById("checkbox_2");
var checkbox_1 = document.getElementById("checkbox_1");
//Capitalize every odd letter
function myConvertFunction() {
var x = document.getElementById("inputText").value;
var string = "";
for (let i = 0; i < x.length; i++) {
if (i % 2 == 0) {
string = string + x[i].toUpperCase();
} else {
string = string + x[i];;
}
}
return string;
}
//Scramble words
function myScrambleFunction(text) {
let words = text.split(" ");
words = words.map(word => {
if (word.length >= 3) {
return word.split('').sort(() => 0.7 - Math.random()).join('');
}
return word;
});
return words.join(' ');
}
document.getElementById("copyText").addEventListener("click", myCopyFunction);
//Copy textarea output
function myCopyFunction() {
var copyText = document.getElementById("convertedText");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
eraseText();
}
//Delete textarea output
function eraseText() {
document.getElementById("convertedText").value = "";
document.getElementById("inputText").value = "";
document.getElementById("inputText").focus();
}
//don't add the event to the radio buttons (previously checkboxes), add it to the convert button, and in its function test which radio button has been checked
convertText.addEventListener('click', function() {
if (checkbox_1.checked && checkbox_2.checked) {
console.log("doing both options");
document.getElementById("convertedText").value = myScrambleFunction(myConvertFunction());
} else if (checkbox_2.checked) {
console.log("proceeding scrumble");
document.getElementById("convertedText").value = myScrambleFunction(text);
} else if (checkbox_1.checked) {
console.log("proceeding cap");
document.getElementById("convertedText").value = myConvertFunction();
}
})
</script>
</body>
</html>
You're never updating var text.
You need to update it before using it if you want the value to be something other than an empty string.
checkbox_2.addEventListener('change', function () {
console.log("checkbox_2 changed");
if (this.checked) {
text = document.getElementById("inputText").value;
myScrambleFunction(text);
} else {
//Do nothing
}

Input Text Box keeps getting erased, along with input effects

I'm trying to create a simple text input box. When the submit button is pressed, the input in the text box is sent to a search script that compares the input to an array of possible values.
However, once I press the submit button, the correct result of the function flashes quickly on the screen, after which the default value of the text box returns, and the function result disappears quickly again. This all happens in a matter of like 100 ms.
Could anyone explain how I can prevent this reset from happening? I've been looking online everywhere, and can only find people who are asking how to reset it, so I'm a bit confused as to what I'm doing wrong.
Result after pressing submit
Result right after displaying the result
Body:
<body>
<div id="blogmenu"></div>
<div ID="RECEPT">
<h1>Search Bar</h1>
<br>
<h2> Time for Searchin' </h2>
<form name="inputForm">
<div><input type="text" min="1" max="50" value="" class="slider" id="a" name="a"></div>
<div><input type="submit" onclick="SearchItem(document.getElementById('a').value);"></div>
</form>
<div ID="ijsjes" style="display:none"> IJsjes </div>
<div ID="spaghetti" style="display:none"> Spaghetti </div>
<div ID="gniocchi" style="display:none"> Gniocchi </div>
<div ID="bananen" style="display:none"> Bananen </div>
</div>
</body>
Function:
<script>
function SearchItem(Term) {
console.log('I did get here');
document.getElementById('a').value = Term;
var ijsjes = {
kleur : "wit",
smaak : "zoet",
type : "dessert"
};
var spaghetti = {
kleur : "geel",
smaak : "hartig",
type : "pasta"
};
var gniocchi = {
kleur : "geel",
smaak : "hartig",
type : "pasta"
};
var bananen = {
kleur : "geel",
smaak : "zoet",
type : "fruit"
};
console.log(spaghetti.kleur + " also " + (spaghetti.kleur == Term));
if (ijsjes.kleur == Term) {
document.getElementById('ijsjes').style.display = 'block';
console.log('ijsjes matched');
} else {
document.getElementById('ijsjes').style.display = 'none';
console.log('ijsjes not matched');
}
if (spaghetti.kleur == Term) {
document.getElementById('spaghetti').style.display = 'block';
console.log('spaghetti matched');
} else {
document.getElementById('spaghetti').style.display = 'none';
console.log('spaghetti not matched');
}
if (gniocchi.kleur = Term) {
document.getElementById('gniocchi').style.display = 'block';
console.log('gniocchi matched');
} else {
document.getElementById('gniocchi').style.display = 'none';
console.log('gniocchi not matched');
}
if (bananen.kleur = Term) {
document.getElementById('bananen').style.display = 'block';
console.log('bananen matched');
} else {
document.getElementById('bananen').style.display = 'none';
console.log('bananen not matched');
}
}
</script>
Your input is of type submit which by default will result in the onsubmit function of your form being fired, which by default does a postback on your page
you can either drop the form and change your button to type="button" or move the function to the onsubmit property of the form (as in my snippet) and use event.preventDefault() to stop the post back
function SearchItem(event) {
event.preventDefault();
var Term = document.getElementById('a').value;
console.log('I did get here');
document.getElementById('a').value = Term;
var ijsjes = {
kleur: "wit",
smaak: "zoet",
type: "dessert"
};
var spaghetti = {
kleur: "geel",
smaak: "hartig",
type: "pasta"
};
var gniocchi = {
kleur: "geel",
smaak: "hartig",
type: "pasta"
};
var bananen = {
kleur: "geel",
smaak: "zoet",
type: "fruit"
};
console.log(spaghetti.kleur + " also " + (spaghetti.kleur == Term));
if (ijsjes.kleur == Term) {
document.getElementById('ijsjes').style.display = 'block';
console.log('ijsjes matched');
} else {
document.getElementById('ijsjes').style.display = 'none';
console.log('ijsjes not matched');
}
if (spaghetti.kleur == Term) {
document.getElementById('spaghetti').style.display = 'block';
console.log('spaghetti matched');
} else {
document.getElementById('spaghetti').style.display = 'none';
console.log('spaghetti not matched');
}
if (gniocchi.kleur = Term) {
document.getElementById('gniocchi').style.display = 'block';
console.log('gniocchi matched');
} else {
document.getElementById('gniocchi').style.display = 'none';
console.log('gniocchi not matched');
}
if (bananen.kleur = Term) {
document.getElementById('bananen').style.display = 'block';
console.log('bananen matched');
} else {
document.getElementById('bananen').style.display = 'none';
console.log('bananen not matched');
}
}
<body>
<div id="blogmenu"></div>
<div ID="RECEPT">
<h1>Search Bar</h1>
<br>
<h2> Time for Searchin' </h2>
<form name="inputForm" onsubmit="SearchItem(event)">
<div><input type="text" min="1" max="50" value="" class="slider" id="a" name="a"></div>
<div><input type="submit"></div>
</form>
<div ID="ijsjes" style="display:none"> IJsjes </div>
<div ID="spaghetti" style="display:none"> Spaghetti </div>
<div ID="gniocchi" style="display:none"> Gniocchi </div>
<div ID="bananen" style="display:none"> Bananen </div>
</div>
</body>
Your last 2 conditions (last 2 if-else block) are assigning value rather than comparing.Because of this your value is printed for a while before getting over-ridden.
Also, as soon as you find the element/search value, you should break/stop because other if/else statements would then overwrite previous results.One way to achieve this would be to have nested if-else, so that the code execution continues only when the conditions/values are not being met.
The input type="button" does a postback, so you are using onclick function to call javascript so you do not need to submit the data anywhere. Just make input type="button" instead of "submit"

How do I fix Expected end of Statement?

How would I fix,"Expected End Of Statement" in the code below?
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
}
</script>
It keeps telling me line 57 which is this line:
<input type="submit" value="Click Me" onClick="substitute();">
Here is the complete HTA link:
http://pastebin.com/fMg5e4RN
Use <form onsubmit="return substitute()" and return true or false depending on validation. Remove type="javascript" or fix it as text/javascript
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return false;
}
// not sure what the following two lines are for
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
return true; // allow submit
}
</script>
and use
<form action="some action" onsubmit="return substitute();">
<input type="text" id="myTextBox"/>
<input type="submit" value="Click Me" />
</form>

Javascript to change button text

i need a javascript function to be called on certain button click, upon that click the button name will change.
ie,
<input type=button id = button1 value=boy onclick=function(boy,girl)>
i need the javascript function to take 2 parameters and check if the value of the button is the first paramter, then the value will become the 2nd and vice versa.
so if i press the button and it says BOY, it will become Girl
and if i press the button and it says Girl it will become boy!
using javascript please thx.
var foo = function(a,b,c){
if(a.value==b){
a.value=c;
}
else{
a.value=b;
}
};
and for the button
<input type="button" id="button1" value="boy" onclick="foo(this,"boy","girl")">
see here: http://jsfiddle.net/w9ed8/
or:
<input type=button id = button1 value=boy onclick="changeMe(this)">
<script>
function changeMe(obj){
if(obj.value == "boy"){
obj.value = "girl"
}else{
obj.value = "boy"
}
}
</script>
Or
<input type=button id = button1 value=boy onclick="changeMe(this, 'boy' , 'girl')">
<script>
function changeMe(obj , param1 , param2){
if(obj.value == param1 ){
obj.value = param2
}else{
obj.value = param1
}
}
</script>
There are many ways to do this, but by getById function showed below you will have a portable function to access to DOM elements by id :
<html>
<script type="text/javascript">
function getById(a) {
if (document.getElementById && document.getElementById(a)) {
return document.getElementById(a)
} else {
if (document.all && document.all(a)) {
return document.all(a)
} else {
if (document.layers && document.layers[a]) {
return document.layers[a]
} else {
return false
}
}
}
}
function myfunc()
{
getById("button1").value =(getById("button1").value=="boy")?"girl":"boy";
}
</script>
<head>
</head>
<input type="button" value="boy" id="button1" onclick="myfunc();" />
</html>
<input type=button id=button1 value=boy onclick='test(this,boy,girl)'>
<script>
function test(Sender,boy,girl){
Sender.value = Sender.value == boy ? girl : boy;
}
</script>
function change()
{
if((document.getElementById("button1").value)=="Boy")
{
document.getElementById("button1").value="Girl"
}
else
{
document.getElementById("button1").value="Boy"
}
}

Categories