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')
Related
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 2 years ago.
Improve this question
I have a form with action method POST. Some Controls in php which are being calculated in jQuery. All the form control values are accessible in next form using POST. But the values I am adding through jQuery are not posting to next form. Please help.
My Form Control Part:
$('#vipcount, #vipprice').keyup(function() {
var value1 = parseFloat($('#vipcount').val()) || 0;
var value2 = parseFloat($('#vipprice').val()) || 0;
var days = parseFloat($('#days').val()) || 0;
gtotal1 = (value1 * value2) * days;
gCount1 = value1;
var value3 = addCommas(gtotal1.toFixed(2)); //(value1 * value2).toFixed(2);
var value4 = value3 + ' AED';
//$('#viptotal').val(value4);
//alert($('#viptotal').val());
$('#viptotal').text(value4);
document.getElementsByName("viptotal")[0].value = value4;
footerFill(gtotal1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xl-3 col-lg-12">
<fieldset>
<h5>VIP Meals Total<small class="text-muted"> </small></h5>
<div class="form-group">
<input id="viptotal" class="form-control date-inputmask" type="text" placeholder="0.00 AED" disabled=true name="viptotal" />
</div>
</fieldset>
</div>
Part of Code to display this value is like this:
$message .= '<td style="width:35%">' . $_POST['viptotal'] . '</td>';
I don't know where I am wrong.
I think that your code have a disabled=" true" for the input field.
If the input field is disabled, Request doesn't include the value of the input field.
you can add the readonly="readonly" instead of disabled=true.
And I can not see the input field with an id called "viptotal".
<input id="viptotal" class="form-control date-inputmask" type="text" placeholder="0.00 AED" readonly="readonly" name="viptotal" />
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!
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.
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>
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 7 years ago.
Improve this question
I have a form that takes students' information. On this form, there is an age entry with legal ages 8 to 20. If the age is less than 8 or greater than 20, a js alert pops up informing the student of the illegal age.
I am seeking for a way to create custom error handlers rather than just using the unfriendly js.alert() method. Any pointers to how this could be done will be appreciated.
To make error messages more user friendly here's one solution.
Create a div with no content. If an error is to be displayed, it will be displayed inside this div.
Here's how to do it with jQuery.
$('button').on('click', function() {
var value = $('input').val();
$('#error-message').html((value < 8 || value > 20) ? 'Error' : '');
});
#error-message {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' />
<button>Submit</button>
<div id='error-message'></div>
Here's a JavaScript solution
document.getElementById('submit').addEventListener('click', function() {
var age = document.querySelector('input').value;
var error = document.getElementById('error-message');
error.innerHTML = (age < 8 || age > 20) ? 'Error' : '';
});
#error-message {
color: red;
}
<input type='number' />
<button id='submit'>Submit</button>
<div id='error-message'></div>