How to use function calling in html file [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am trying to create a html page which will take the input from the user on the product type and print the discount on the basis of the function described in the html file. Here is the snippet of the code below. I am new to the html and java script coding. But the code is not printing the discount at all. Please suggest the way of doing it.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome</title>
</head>
<body>
<h2>Product Information</h2>
<br>
<br>
<label for='Product'>Select the product to know discount</label>
<select id = 'Product'>
<option value="">--Choose a product--</option>
<option value= "gold">Gold</option>
<option value= "diamond">Diamond</option>
<option value= "silver">Silver</option>
<option value= "bronze">Bronze</option>
</select>
<br>
<p></p>
<script>
constant select = document.querySelector('select');
constant para = document.querySelector('p');
select.onchange=setDiscount;
function setDiscount() {
constant choice = select.value;
if (choice === 'Gold') {
para.textContent = 'Discount is 25';
}
else if (choice === 'Diamond') {
para.textContent = 'Discount is 15';
}
else if (choice === 'Silver') {
para.textContent = 'Discount is 10';
}
else if (choice === 'Bronze') {
para.textContent = 'Discount is 5';
}
else {
para.textContent = '';
}
}
setDiscount();
</script>
</body>
</html>

Two things:
Its constinstead of constant
You set the values as lower case "gold", "diamond", etc, but when you compare you use capital letters "Golds"
Besides that, you already have an id for select, you can use document.getElementById. The same thing for the paragraph, you can add an id to it.

Related

My function is not running while making web [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 11 months ago.
Improve this question
I am kinda learning to make typing website and when i trying to random write sth on h2 when i trigger the start button but my function is not responding , even when i do console it doesnt show any response
i was trying to show the text of array words when i trigger the button but my playgame function aint working
html
<div class="firstDIv">
<div class="centerDiv">
<h1>WELCOME TO THE SPEED TYPING TEST</h1>
<br/>
<br/>
<h2 id="msg"></h2>
<textarea name="" id="mywords" cols="110" rows="10" placeholder=" START TYPING" ></textarea>
<br/>
<br/>
<button id="btn" class="mainbtn" align="center">START</button>
</div> </div>
JS
const words = [
"THIS IS A TYPING WEBSITE",
"TYPE YOUR WORDS",
"YOU CAN TYPE WORD"];
const msg = document.getElementById('msg');
const typeWords = document.getElementById('mywords');
const btn = document.getElementById('btn');
let startTime, endTime;
playgame = () => {
let randomtext = Math.floor( Math.random()*words.length)
msg.innerText = words[randomtext];
}
btn.addEventListener('click', function(){
if(this.innerText == 'Start'){
typeWords.disabled = false;
playgame();
}
})
note:- CSS is not shown here
This should be:
if(this.innerText == 'START')
instead of,
if(this.innerText == 'Start')

Why does it come up with 'null' on my website when I try to print a user inputted word later on in the script? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
Here's my html so far:
<html>
<body>
<head>
<script>
Array.prototype.sample = function(){
return this[Math.floor(Math.random()*this.length)];
}
var sentances = ['This new amazing product will be in every home by 2021','Buy this now- before we run out of stock!','Get this now, before everyone else will have one!'].sample()
var quotes = ['“This is amazing!"','"Buy it Now!"'].sample()
var titleback = ['"Nothing can beat','"How can you not love'].sample()
var title = document.getElementById("title")
function myfunction() {
document.getElementById("Sentances").innerHTML = sentances;
document.getElementById("Quotes").innerHTML = quotes;
document.getElementById("Titleback").innerHTML = titleback + title;
}
</script>
</head>
<h2>Auto Ad Generator</h2>
<p>Enter the title of your product:</p>
<form method="post" action=".">
<p><input name="name" id="title"></p>
<button type="button" id="button" onclick="myfunction()">Try it</button>
<p><input name="name2" type="reset"></p>
</form>
<p id="Sentances"></p>
<p id="Sentances2"></p>
<p id="Quotes"></p>
<p id="Titleback"></p>
</body>
</html>
Though when I run this on the website (sites.google.com/view/generator-ad/home), it just prints the word 'null' next to the sentence randomly chosen from 'titleback'. Why does it do this, and not print the name of the product the user inputted at the start? I'm new to javascript and so sorry if the answer is obvious. Any help would be appreciated.
title is a reference to an element. You can't output this to the page.
Instead you presumably want its .value property, to retrieve the value entered by the user.
document.getElementById("Titleback").innerHTML = titleback + title.value;
HtmlInputElement means in this case that you are trying to print out the whole element, instead of the value.
I guess the following example can you help to solve your issue:
Array.prototype.sample = function() { return this[Math.floor(Math.random()*this.length)] };
const submitButton = document.getElementById('submit');
const titleInput = document.getElementById('title');
submitButton.addEventListener('click', e => {
const titleFromArray = ['"Nothing can beat','"How can you not love'].sample();
document.getElementById("Titleback").innerHTML = `${titleFromArray} ${titleInput.value}"`;
});
<input id="title" name="name">
<p id="Titleback"></p>
<button id="submit">Submit</button>
+1 suggestion:
Usually I like better naming convention. For example in this case when you use getElementById then I would suggest to use the variable name with the element type as well. Maybe this is just my personal preference. By doing this you will be sure that you are not mixing up values with DOM elements' references. For example in button case a better name can be just like submitButton. Other example:
const titleInput = document.getElementById('titleInput');
const title = titleInput.value;
I hope this helps!

Storing user inputs (Q & A ) in an array and retrieve the answer [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm a beginner in JavaScript & in this task I have I have to do the following;
allow the user to enter questions and answer pairs in an html page which will be stored in an array.
retrieve the answer when one of the questions from the array is asked (different boxes, labels)
Reset the boxes when I press a button
So far, I just know how to store the user input in one single array, append it when a button is pressed and display it.
How do I have two different objects (Question & answer) in the same array that will be an input by the user in pairs and retrieve only the answer when the Question is input again? It kind of works like a Manual Bot.
var myArr = [];
function pushData() {
// get value from the input text
var inputText = document.getElementById('inputText').value;
// append data to the array
myArr.push(inputText);
var pval = "";
for (i = 0; i < myArr.length; i++) {
pval = pval + myArr[i] + "<br/>";
}
// display array data
document.getElementById('pText').innerHTML = pval;
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" name="text" id="inputText" />
<button onclick="pushData();">Show</button>
<p id="pText"></p>
</body>
</html>
Why not use an object? That way, you can store the Question/Answer pairs with the Question as the key and the answer as its value. Try this out:
var myObj = {};
function pushData() {
// get value from the input text
var question = document.getElementById('inputQuestion').value;
var answer = document.getElementById('inputAnswer').value;
// add data to the object
myObj[question] = answer;
}
function getAnswer() {
var question = document.getElementById('inputRetrieveQuestion').value;
if (myObj[question]) {
document.getElementById('pText').innerHTML = myObj[question];
}
}
<html>
<body>
<h3> Enter a Question/Answer </h3>
Question <input type="text" name="question" id="inputQuestion" /> Answer <input type="text" name="answer" id="inputAnswer" />
<button onclick="pushData()">Submit</button>
</br>
<h3> Retrieve an Answer </h3>
Question <input type="text" name="question" id="inputRetrieveQuestion" />
<button onclick="getAnswer()">Submit</button>
</br>
Answer:
<div id="pText"></div>
</body>
</html>

which takes the text thats is input in the inputbox in html and display it below as a clickable option. [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am working on a project, which takes the text that is input in the inputbox and display it below as a clickable option/button in html. Is it possible to make such thing, if yes please let me know, any help would be highly appreciated.
If you want in javascript :
<input type="text" id="fname" onkeyup="myFunction()">
<button id='button' style='display:none;'></button>
<script>
function myFunction() {
var x = document.getElementById("fname");
document.getElementById("button").innerHTML = x.value
var x = document.getElementById('button');
if (x.style.display === 'none') {
x.style.display = 'block';
}
}
</script>
We have 2 elements one is input on which providing any input will appear on the next hidden element (button) document.getElementById("fname") will find the element and next line is changing the value of button and then we are making button appear which is hidden till now.
We can also do the very similar thing using jquery
<input type="text" id="fname">
<button id='button' style='display:none;'></button>
$( "#fname" ).keyup(function() {
$("#button").show();
$("#button").html($(this).val());
})
Is this what are youre looking for?
function add() {
var option = document.createElement("option");
option.text = document.getElementById("toadd").value;
document.getElementById("option").add(option);
}
function add2() {
var aTag = document.createElement("button");
aTag.setAttribute ("id", Date.now())
aTag.innerHTML = document.getElementById("toadd").value;;
document.getElementById("thisdiv").appendChild(aTag);
}
<input id="toadd" type="text"/>
<button onClick="add()" >Add</button>
<button onClick="add2()" >Add in another way</button>
<select id="option">
</select>
<div id="thisdiv"></div>

If and Else comparing numbers JavaScript [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am new to JavaScript... The following code displays correct even when I submit an incorrect value, I can't get the "else" section to work:
<!doctype html>
<html>
<head>
<script type="text/javascript">
/*<![CDATA [*/
function myFunction() {
var answer = document.getElementById('answer');
if (answer = 10)
document.getElementById("valid").innerHTML = "Correct!";
else
document.getElementById("valid").innerHTML = "Please, Try Again!";
}
/* ]]> */
</script>
</head>
<body>
<h2>What is 3+7=?</h2>
<form>
<input type="text" id="answer">
<input type="submit" onClick="myFunction(); return false;">
</form>
<div id="valid"></div>
</body>
</html>
Change your function to
function myFunction() {
var answer = parseInt(document.getElementById('answer').value,10);
if (answer === 10)
document.getElementById("valid").innerHTML = "Correct!";
else
document.getElementById("valid").innerHTML = "Please, Try Again!";
}
And it will work like a charm.
Explanation.
The element with id="answer" is an input. To retrieve value of an input, you need .value
Like var answer = document.getElementById('answer').value;
Now, this will return the value in your input type="text" as a string.
Ideally, you should parse it into the int using parseInt().
Like var answer = parseInt(document.getElementById('answer').value);
This will avoid type coersion.
Lastly, you want to compare the two values, so you need to use == operator.
Single =, an assignment operator would just assign the value and would always result into true since assignment gets successful.
And it's best practice to use strict comparison with datatypes. using === operator.
You need to use the equality operator == instead of the assignment operator =.
Also you need to get the value of the answer, not the just the element.
<!doctype html>
<html>
<head>
<script type="text/javascript">
/*<![CDATA [*/
function myFunction() {
var answer = document.getElementById('answer').value;
if (answer == 10)
document.getElementById("valid").innerHTML = "Correct!";
else
document.getElementById("valid").innerHTML = "Please, Try Again!";
}
/* ]]> */
</script>
</head>
<body>
<h2>What is 3+7=?</h2>
<form>
<input type="text" id="answer">
<input type="submit" onClick="myFunction(); return false;">
</form>
<div id="valid"></div>
</body>
</html>

Categories