How do you make a simple-answer question form in js?
I tried
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<script>
function cipher1(){
var val ="theanswer";
if(val == (document.getElementById("cipher1").value)){
alert("correct");
}
}
</script>
</head>
<body id="bod">
<div id="cipher1"style="display:none;">
<input id="cipher1"type="text" value="write the answer here"/>
<input type="button" class="but"value="answercheck"onclick="cipher1()"/>
</div>
</body>
</html>
But it doesn`t work.
please help!!!
Your Id must be unique. In your code you are associating 'cipher1' with div and input field. You can change to Id of the text field to cipher2. See the code below:
function cipher1(){
var val ="theanswer";
if(val == (document.getElementById("cipher2").value)){
alert("correct");
}
}
<div id="cipher1">
<input id="cipher2"type="text" value="write the answer here"/>
<input type="button" class="but"value="answercheck"onclick="cipher1()"/>
</div>
Try first to change the two duplicates ID
div id="**cipher1**"style="display:none;">
<input id="**cipher1**"type="text" value="write the answer here"/>
Than remove display style from the parent div
You have a duplicate id on page (you can have only one id on page) cipher1
Related
Hi guys im trying to make a form which when the user enters two values that are the using an f statement same with an onsubmit event handler. that then shows an alert message if they match. my problem is im not seen onsubmit pop up. or an alert i dont know where im going wrong please help.
function nameCheck(){
let fname = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 = = fname2){
alert("The names match ");
} else if{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="submit" onclick()= "nameCheck()" name = "submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</body>
</html>
Where to begin...
there is no onclick()="" attribute for elements, it's onclick=""
you have a space between = =
there is no fname1 variable defined
you don't have a condition after else if
if you are using alert() just for your own debugging purpose, use console.log() instead, it will save you time in a long run.
Here is the fixed code:
function nameCheck(){
let fname1 = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 === fname2){
alert("The names match ");
} else{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="reset" value="Reset">
<input type="submit" onclick= "nameCheck()" name = "submit" value = "Submit">
</div>
</form>
</body>
</html>
Variables
So first, in the if(fname1 = = fname2), and the variable creation, fname and fname1 do not match. Change either one so it matches the other.
if() stuff
This is the equality sign: === and you did = =. The space has to be a equal sign.
Also, the else if() is only when you want multiple if()s. else should be used for this program.
HTML Attribute
The onclick() should be onclick.
How can I change this script so that a user has to click a button at the end to make all form text entries change to capitals? I know that I need to use the onclick function, but I am just not sure where or how to enter it.
<html>
<head>
<title>Information Form</title>
<style>
input[type=text] {
text-transform: capitalize;
}
</style>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
</body>
</html>
Something like this would work:
<html>
<head>
<title>Information Form</title>
<style>
input[type=text] {
text-transform: capitalize;
}
</style>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
<div>
<button id="clickme" onclick="capInputs();">Capitalize Inputs</button>
</div>
<script>
function capInputs() {
var elements = document.querySelectorAll("input[type=text]")
for (var i = 0, element; element = elements[i++];) {
element.value = (element.value).toUpperCase();
}
}
</script>
</body>
</html>
See this :D
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
var x = document.getElementById("myBtn").innerHTML;
document.getElementById("myBtn").innerHTML =x.toUpperCase() ;
}
<html>
<body>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
</body>
</html>
You don't need to force the user to click a button at the end to change their text to uppercase. You can do this authomatically using JavaScript.
It looks like you've figured out that using CSS won't change the value of your inputs to uppercase, only change the appearance on the screen (and on my browser, text-transform doesn't even seem to work on the input element). Instead, you should attach event listeners to your the input event (which is fired every time input text is edited) inside a <script>...</script> tag (which should be inserted just before the closing </body> tag.
document.querySelectorAll('input').forEach(function(e) {
if (e.type === 'text') {
e.addEventListener('input', valueToUpperCase)
}
})
function valueToUpperCase(e) {
(e = e.target).value = e.value.toUpperCase()
}
<label>
Type your name here:
<input type="text" name="nameInput" />
</label>
<br/>
<label>
Type your street address here:
<input type="text" name="addressInput" />
</label>
<br/>
<label>
Type your city and state here:
<input type="text" name="stateInput" />
</label>
I am assuming (based on your css rule) that you want to capitalize the input text entries once the user press a button. If you want to change all text into upper case (i.e. all capital letters, not just the first one), then uppercase should be used in the css instead of capitalize.
#Amber Ollis, your code applies the CSS rule for capitalize to all input text elements from the beginning. The rule should only apply once pressed the button if that is the effect you want (I have added such button which is missing in your code).
See code below (working):
<html>
<head>
<title>Information Form</title>
<style>
.capitalized {
text-transform: capitalize;
}
</style>
<script>
function capitalize() {
var inputs = document.querySelectorAll("input[type=text]");
for (i in inputs) {
inputs[i].className = "capitalized";
}
}
</script>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
<input type="button" onclick="capitalize();" value="Capitalize all" />
</body>
</html>
All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).
<head>
<script type="text/javascript">
var n=parseInt(ocument.forms["formNum"]["numero"].value);
document.getElementById("numero").value=n;
function sumar() {
n=document.forms["formNum"]["numero"].value+10;
document.forms["formNum"]["numero"].value=n;
}
function inicializar() {
n=document.forms["formNum"]["numero"].value=0;
}
</script>
</head>
<body>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" />
</p>
<p>
<input type="button" name="sumar" value="Sumar" onclick="sumar()" />
<input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
<body>
<script type="text/javascript">
function sumar(){
document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
}
function inicializar(){
document.getElementById("numero").value=0;
}
</script>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" value="0" />
</p>
<p>
<input type="button" value="Sumar" onclick="sumar()" />
<input type="button" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
Five suggestions.
It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example
Demo: http://jsfiddle.net/DPJCR/
This code should work:
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>
See: Set the value of an input field
Maybe you are getting an exception from the parseInt that prevents the value from changing.
If it is an option to use jQuery, try this:
function sumar(){
$("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}
Try this this will help you
var count=10;
$('#btnSumar').click(function(){
if($('#numero').val()=='')
{
$('#numero').val(count);
}else
$('#numero').val(eval($('#numero').val())+count);
});
$('#btnInc').click(function(){
$('#numero').val('');});
Fiddle here
I don't really know much Javascript yet, I was hoping somebody could help me understand how to solve my problem:
My HTML form has a checkbox and then a textarea:
<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>
I want it so that the textarea gets disabled when the checkbox is ticked so that the user cannot click it and enter text.
I've had a look here and on google, I couldn't find any clear examples of how to do it.
I'm guessing this can be done in Javascript, but I'm feeling a bit out of my depth. Can somebody explain to me how to do this, preferably without using a third party library?
<form>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/>
<textarea name="details" id="tb1"></textarea>
</form>
<script>
function toggleDisabled(_checked) {
document.getElementById('tb1').disabled = _checked ? true : false;
}
</script>
This extremely easy to do with jQuery. Everyone uses jQuery, so should you ;-).
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" />
<textarea name="details" id="details"></textarea>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#detailsgiven").change(function() {
if($(this).is(":checked")) {
$("#details").attr("disabled", "disabled");
}
else {
$("#details").removeAttr("disabled");
}
});
});
</script>
try this:
if ($('input:checkbox').is(':checked')) {
$('textarea').attr('disabled', 'disabled');
}
<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>
Notice how onclick event of checkbox is used to execute some javascript code.
if you give your html elements ids, you can access the elements in javascripts through getElementById method of javascript DOM (document object model).
And once you have the element, you can set/get it's attributes, do whole lot of things.
According to my understanding to your requirement. At first, textarea is disabled. When detailsgiven checkbox is checked, textarea is enabled and checkbox is disabled so that he cannot changed. Try like this.
<!DOCTYPE html>
<html>
<head>
<script>
function valueChanged()
{
var element1 = document.getElementById("detailsgiven");
var element2 = document.getElementById("details");
if(element1.checked)
{
element2.disabled=false;
element1.disabled="disabled";
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" onchange="valueChanged()"/>
<textarea name="details" id="details" disabled="true"></textarea>
</form>
</body>
</html>
All you have to do is when you mark the checkbox, just add the attribute disabled="disabled" in the textarea.
Checkout the jsfiddle I have added
http://jsfiddle.net/Q9Lg4/
I've seen all the posts but my problem isn't that it doesn't change the background color but rather that it does and the change it but to the original. Here's the code.
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="color.css"/>
<script type="text/javascript">
function calc(color){
//document.body.bgColor = color;
x=document.myForm
var val1=x.input1.value;
var val2=x.input2.value;
var val3=val1+"+"+val2;
if(eval(val3)<0) return;
else{
alert("The result is "+eval(val3));
var bd = document.getElementById ('body');
bd.className="highlight";
return;
}
}
</script>
</head>
<body id="body" onload="changeBackground(red)">
<form name="myForm" onsubmit="calc(this)">
Enter 2 values to add ;)
<input type="text" name="input1">
<input type="text" name="input2">
<input type="submit" value="Send Input">
</form>
</body>
</html>
CSS:
.hightlight{
background-color: yellow;
}
I understand that the function ends right before the end of the function. So how can I get it to hold the color?
The problem is that you tries to POST page over submit button. In this case page is fully redrawn, without keeping previous state that is set by your script.
Just change code of button:
<input type="button" value="Send Input" onclick="calc(this)">