I'm trying to make a slogan game where the user inputs the company's name that uses the slogan. The games in early development and if missing a but my current code does not work.
<html land="en">
<head>
<title>Whats that ???</title>
<script>
function checkAnswer()
{
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
document.getElementById("correct/incorrent").innerHTML += theanswer;
}
</script>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check" onClick="checkAnswer">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
Tnx Adam
Fixed syntax errors:
theanswer != theAnswer, missing camel case letter "A"
need to invoke function by () rather than just stating its reference checkAnswer
<html land="en">
<head>
<title>Whats that ???</title>
<script>
function checkAnswer() {
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
document.getElementById("correct/incorrent").innerHTML += theAnswer;
}
</script>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check" onclick="checkAnswer()">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
</body>
</html>
The onclick event executes any javascript between the quotes. You were just referencing a function, not calling it.
onclick="checkAnswer()"
<html land="en">
<head>
<title>Whats that ???</title>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
<script>
var btn = document.getElementById("answerInput");
var ans = document.getElementById("correct/incorrent");
btn.onClick = function (){
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
ans.innerHTML += theAnswer;
}
</script>
</body>
</html>
Related
I need to pass value from page1.html to page2.html. However, nothing happens as open the page2.html as fill out the input field.
How should I do to fix it?
Page1.html
<body>
<div class="pname" data-id="barcode-number" onclick="goforward(this);">Prod</div>
<script type="text/javascript">
function goforward(d) {
var r = d.getAttribute("data-id");
var detailsWindow = window.open('page2.html');
detailsWindow.onload = function{
document.getElementById('prod0').value = p1name;
document.getElementById('prod1').value = p2name;
}
}
</script>
</body>
Page2.html
<!DOCTYPE html>
<html><head><title></title></head>
<body>
<div class="md_product">
<input id="prod0" value="Product One">
<input id="prod1" value="Product Two">
</div>
</body></html>
You can use JS localstorage to achieve your requirements.
Here is one case that can solve your problem.
Page 1:
<body>
<div class="pname" data-id="barcode-number" onclick="goforward(this);">Prod</div>
<script type="text/javascript">
function goforward(d) {
var r = d.getAttribute("data-id");
var detailsWindow = window.open('page2.html');
detailsWindow.onload = function{
let val1 = document.getElementById('prod0').value = p1name;
localStorage.setItem('prod0', 'val1');
let val2 = document.getElementById('prod1').value = p2name;
localStorage.setItem('prod1', 'val2');
}
}
</script>
</body>
Page 2:
<!DOCTYPE html>
<html><head><title></title></head>
<body>
<div class="md_product">
<input id="prod0" value="Product One">
<input id="prod1" value="Product Two">
</div>
</body>
<script type="text/javascript">
var prod0 = localStorage.getItem("prod0");
var prod1 = localStorage.getItem("prod1");
document.getElementById('prod0').value=prod0;
document.getElementById('prod1').value=prod1;
</script>
</html>
you have to pass perameters in render url like /page2?param1=textbox1value,param2=textbox2value
This is my simple html code. I included javascript inside this html file.I would like to perform validation on name like no empty field and data format validation but it is not working. Can some one please help me to get rid of this
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
if(nam == "")
{
alert("Name should be filled out");
document.getElementById("name").focus;
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font><br><br><br
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()" >
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
You have a mistake in your HTML code. You forgot to close a <br> tag before <form name='form'>
Also, "focus" is a method, not a property. I have added that as well
Here is the corrected code.
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate() {
var nam = document.forms[0].name.value;
if (nam == "") {
alert("Name should be filled out");
document.getElementById("name").focus();
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font>
<br>
<br>
<br> <form name="form"> Name :
<input type="text" name="name" id="name">
<br>
<br>
<input name="Participate" type="button" value="Participate" onClick="validate()">
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
I want to create a simple html-javascript page with a text field and a submit button. Submit button has to be enabled every 5 minutes, then you can wrote something in the field and click on submit.clicking on submit, it show how much time is elapsed from activation and submit. Thanks
<html>
<body>
<div id="main">
<!-- Form -->
<form id="form" action="/" method="post">
<label>
<span>Website:</span>
<input placeholder="http://" type="url" tabindex="4" required>
</label>
</div>
<div>
<button name="submit" type="submit" id="submit">invia</button>
<script type="text/javascript">
document.getElementById('submit').disabled = true;
setTimeout(function(){
document.getElementById('submit').disabled = false;
}, 2000);
</script>
<script type="text/javascript">
var t0 = performance.now();
var i=0;
do
{
i++;
} while document.getElementById('submit').click();
var t1 = performance.now();
var time= ( (t1 - t0) + " milliseconds.");
document.getElementById('time').innerHTML = time;
</script>
</div>
<div id="time"></div>
</form>
<!-- /Form -->
</div>
</body>
</html>
Have a look at WindowTimers.setInterval() where a function/callback is invoked at every nth time defined.
In your case, button attribute enabled/disabled.
Hope this helps.
problem solved.
<html>
<body>
<div id="main">
<!-- Form -->
<form id="form" action="/" method="post">
<div>
<label>
<span>Website:</span>
<input placeholder="http://" type="url" required>
</label>
</div>
<div>
<input type="button" value="Invia" id="Invia" onclick="stopTimer()" />
<script type="text/javascript">
document.getElementById('Invia').disabled = true;
setTimeout(function(){
document.getElementById('Invia').disabled = false;
document.getElementById('tempVar').value = Date.now();
}, 5000);
</script>
<script>
var greeting;
function timeGreeting()
{
greeting = performance.now();
}
timeGreeting();
function stopTimer()
{
var time = performance.now();
alert((time - greeting) + "ms");
}
</script>
<input type="button" value="Ricarica Pagina" onClick="document.location.reload(true)">
</div>
</form>
<!-- /Form -->
</div>
</body>
</html>
I am new to the front end development but have quite a bit of back end dev experience. I've tried a few different approaches to the javascript below and that is just some of the things I tried.
I have the following code that shows the products. This is in n for each loop from my product list.
At the bottom of the page i have the add button.
I need to get the data-Id of each product to get the productId, price to get the price and the value of the qty input field so that I can send it through to my cart.
I can't get those values and have tried a few different things.
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">#Html.DisplayFor(modelItem => product.Code)</h3>
</div>
<div class="panel-body">
<div class="text-center" id="user_image">
<img src="../../images/chickenBreast.jpg" class="img-thumbnail" />
</div>
<br />
<div class="panel-body form-group-separated">
<div class="form-group">
<label class="control-label">Short Description:</label>
<p>#Html.DisplayFor(modelItem => product.Description)</p>
</div>
<div class="form-group">
<label class="control-label">Long Description:</label>
<p>#Html.DisplayFor(modelItem => product.LongDescription)</p>
</div>
</div>
<div class="panel-footer">
<form class="form-inline" role="form">
<div class="form-group">
<input id="qty" data-id="#product.Id" price="#product.Price" type="text" class="Product-control" placeholder="Qty" />
</div>
<button id="AddButton" class="btn btn-primary pull-right">Add to cart</button>
</form>
</div>
</div>
</div>
</div>
Here is my javascript, I have tried a few different things but nothing seems to give me the required data
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$("#AddButton").click(function (form) {
var productToUpdate = $("input").parent().find("data-id");
var countToUpdate = $('input[id="qty"]', form).val();
var productPrice = $(this).parent().find('price').val();
if (productToUpdate != '') {
// Perform the ajax post
$.post("~/Cart/GetCartItems", { "productId": productToUpdate, "qty": countToUpdate, "price": productPrice },
function (data) {
//Check for not process the callback data when server error occurs
//if (data.ItemCount != -1) {
// $('#cart-total').text(data.CartTotal);
//}
});
}
});
</script>
The selector data-id will never match. That is suggesting that data-id is an element type as (example) <data-id ...></data-id> try using find('input[data-id]') instead.
https://api.jquery.com/category/selectors/attribute-selectors/
https://api.jquery.com/has-attribute-selector/
Description: Selects elements that have the specified attribute, with
any value.
Example from documentation:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attributeHas demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
var idString = $( this ).text() + " = " + $( this ).attr( "id" );
$( this ).text( idString );
});
</script>
</body>
</html>
// Using .one() so the handler is executed at most once
// per element per event type
$("div[id]").one("click", function() {
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attributeHas demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
</script>
</body>
</html>
I figured out the hierarchies
here is my solution
HTML
<div class="panel-footer">
<form class="form-inline" role="form">
<div class="form-group">
<input id="qty" type="text" class="Product-control" placeholder="Qty" />
</div>
<button id="AddButton" data-id="#product.Id" price="#product.Price" class="btn btn-primary pull-right">Add to cart</button>
</form>
</div>
The javascript
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$("#AddButton").click(function () {
var productId = $(this).attr('data-id');
var productPrice = $(this).attr('price');
var qty = $(this).prev().children(".Product-control").val();
if (productId != '') {
// Perform the ajax post
$.post("~/Cart/GetCartItems", { "productId": productId, "qty": qty, "price": productPrice },
function (data) {
//Check for not process the callback data when server error occurs
//if (data.ItemCount != -1) {
// $('#cart-total').text(data.CartTotal);
//}
});
}
});
</script>
When i click on button it has to diaplay dialogbox but it is not showing. I found this code from dojo documentation. Whwn i click on button it is not showing anything. Here is my code please help me.
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
</script>
<body class="claro">
<div id="gridDiv"></div>
<div data-dojo-type="dijit.Dialog" id="formDialog2"
title="Filtering Rows" style="display: none">
<form data-dojo-type="dijit.form.Form" id="123">
<script type="dojo/event" data-dojo-event="onSubmit"
data-dojo-args="e">
require(["dojo/dom"], function(dom){
var f = dojo.byId("123");
var s = "";
var elem = f.elements[0];
s = elem.value;
dijit.byId('grid').filterBar(s);
});
return false;
</script>
Search: <input type="text" name="searchtext" value=""
data-dojo-type="dijit/form/TextBox">
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit.form.Button" type="submit">OK</button>
<button data-dojo-type="dijit.form.Button" type="button"
data-dojo-props="onClick:function(){dijit.byId('formDialog2').hide();}">Cancel</button>
</div>
</form>
</div>
<button id="buttonThree" data-dojo-type="dijit.form.Button"
type="button">
Show Filter
<script type="dojo/method" data-dojo-event="onClick"
data-dojo-args="evt">
dijit.byId("formDialog2").show();
</script>
</button>
Check to see if you have
require(["dijit/Dialog",'dijit/form/TextBox','dijit/form/Button']);
Added somewhere to the head. When i added it it worked fine.
http://jsfiddle.net/theinnkeeper/HX4uR/
It seems your dojo is not loading at all. To avoid parsing issues I always import the dojo library with djConfig="parseOnLoad:true when calling the script for the newest versions of dojo.
dojo.require("dijit.form.Form");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<div id="gridDiv"></div>
<div data-dojo-type="dijit.Dialog" id="formDialog2" title="Filtering Rows" style="display: none">
<form data-dojo-type="dijit.form.Form" id="123">
<script type="dojo/event" data-dojo-event="onSubmit" data-dojo-args="e">
require(["dojo/dom"], function(dom){ var f = dojo.byId("123"); var s = ""; var elem = f.elements[0]; s = elem.value; dijit.byId('grid').filterBar(s); }); return false;
</script>
Search:
<input type="text" name="searchtext" value="" data-dojo-type="dijit/form/TextBox">
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit.form.Button" type="submit">OK</button>
<button data-dojo-type="dijit.form.Button" type="button" data-dojo-props="onClick:function(){dijit.byId('formDialog2').hide();}">Cancel</button>
</div>
</form>
</div>
<button id="buttonThree" data-dojo-type="dijit.form.Button" type="button">
Show Filter
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
dijit.byId("formDialog2").show();
</script>
</button>
</body>
</html>