I have just started learning Javascript & i cant figure out why this code wont work, the submit button wont display any results.
I want to try the task in my way & not in any of the ways listed online as we havent learnt how to do that yet.
I think this is a very efficient method which does not include any prompts or alerts.
<!DOCTYPE html>
<html>
<head>
<title>Basic Task 2</title>
<style>
h1 {font-family:serif; font-size:48px; color:#ff00ff; text-align:center}
h2 {font-family:sans-serif; font-size:36px; color:#0000ff; text-align:center}
h3 {font-family:sans-serif; font-size:24px; color:#00ffff; text-align: center}
</style>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="/action_page.php" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<script>
function myFunction() {
var num=document.getElementById('ooe').value
if ( num % 2 == 0 )
document.getElementById('type2')("Entered number is even");
else
document.getElementById('type2')("Entered number is odd");
}
</script>
<h2 id="type2"></h2>
</body>
</html>
You need to use .textContent to display the results. You are not displaying any message on your submit click event.
You can read more about .textContent on JS MDN reference
Run snippet below to see in it working.
function myFunction() {
var num = document.getElementById('ooe').value
if (num % 2 == 0)
document.getElementById('type2').textContent = "Entered number is even";
else
document.getElementById('type2').textContent = "Entered number is odd";
}
h1 {
font-family: serif;
font-size: 48px;
color: #ff00ff;
text-align: center
}
h2 {
font-family: sans-serif;
font-size: 36px;
color: #0000ff;
text-align: center
}
h3 {
font-family: sans-serif;
font-size: 24px;
color: #00ffff;
text-align: center
}
<html>
<head>
<title>Basic Task 2</title>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<h2 id="type2"></h2>
Your problem is in document.getElementById('type2')("Entered number is even"); you need to use .textContent
<!DOCTYPE html>
<html>
<head>
<title>Basic Task 2</title>
<style>
h1 {font-family:serif; font-size:48px; color:#ff00ff; text-align:center}
h2 {font-family:sans-serif; font-size:36px; color:#0000ff; text-align:center}
h3 {font-family:sans-serif; font-size:24px; color:#00ffff; text-align: center}
</style>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="/action_page.php" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<script>
function myFunction() {
var num = document.getElementById('ooe').value
if ( num % 2 == 0 )
document.getElementById('type2').textContent = "Entered number is even" ;
else
document.getElementById('type2').textContent = "Entered number is odd";
}
</script>
<h2 id="type2"></h2>
</body>
</html>
Related
I am trying to create a quiz game that allows the user to simply click on an image as their answer.
I
function checkimage(){
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onclick="checkimage"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
</body>
</html>
have tried firstly to make the images into buttons which worked because they are clickable.However, i have very basic javascript knowledge and i am not able to do the "on-click" function that once the user clicks the image, the program will check if the image clicked is the right answer and then return a message.
You can get id value when an image got clicked and then you can compare with your original answer to check whether it's right or not.
function checkimage(element) {
var rightAns = "Apple";
if (element.id == rightAns) {
alert("You selected right ans!")
} else {
alert("You selected wrong ans!")
}
}
<h3>Which image is of an apple?</h3>
<input type="image" id="Apple" src="https://www.organicfacts.net/wp-content/uploads/apple.jpg" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
<input type="image" id="Watermelon" src="https://snaped.fns.usda.gov/sites/default/files/styles/crop_ratio_7_5/public/seasonal-produce/2018-05/watermelon.jpg?itok=6EdNOdUo" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
Note that here i am passing reference of an image element to the
javascript function on click event like
'onclick="checkimage(this)"' where 'this' is a reference.
Hello this is simple if i understood correctly, you need to use hidden values in your html code for example:
//OPTION 1:
<img src="IMAGE_PATH_HERE" onClick='answerIs('id_here_or_answer_here')'/>
//OPTION 2:
using hidden values
<input type='hidden' value='id_here_or_answer' id='answer_{id should be unique}'/>
Finally if you are using a loop you could use any option with uniques ID in order to make it work:
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
//<inputs OR <img TAGS
<input type='hidden' value='id_here_or_answer' id='answer_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');return false;'/>
}
//end//
in fact, you are telling to the JS what ID is the real answer even if you have a lot of options
USAGE in your case:
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
<script>
$( document ).ready(function() {
console.log( "ready!" );
function checkimage(value){
alert('answer is:' + value);
if (value == "apple"){
//do something
}else{
//optionally do something here too
}
}
});
</script>
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%" onClick="checkimage('apple');return false;"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onClick="checkimage('banana');return false;"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
<inputs OR <img TAGS
<input type='hidden' value='snow' id='snow_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');reuturn false;'/>
}
//end//
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<script>function checkimage(value)</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<input type="image" id="snow" src="snow.jpg" style="width:50%" onclick="checkimage('snow');return false;"></div>
<input type="image" id="forest" src="forest.jpg" style="width:50%" onclick="checkimage('forest');return True;"> </div>
</div>
<div>
<script src="test.js"></script>
</div>
</body>
</html>
I cannot for the life of me figure out why the text under Sub1 and Sub2, do not show the text under them, when clicking them. Only the first link "Main Category" functions. It is making me enter more description, though the issue is already explained the best I know how.
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>
You have a typo in your JS $('.commentsTitle').click(...
In the html you assigned the class commentsTitle, in the JS, you referred to commentTitle.
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>
While taking pring textbox also coming in print page and its look like bad UI. how can i remove that textbox and show only the text entered value.
Please find the image. How can I resolve this issue. I want to show only the text what I have entered in the textbox. Please help me how can I resolve this issue.
jsfiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function PrintDiv() {
var contents = document.getElementById("dvContents").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
</script>
</head>
<body>
<form id="form1">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">ASPSnippets.com
Sample page</span>
<hr />
<div id="dvContents" style="border: 1px dotted black; padding: 5px; width: 300px">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #18B5F0">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
<input type="text" class="input printText" value="test">
</div>
<br />
<input type="button" onclick="PrintDiv();" value="Print" />
</form>
</body>
</html>
please add some class to wanted input .printText:
<td width="267">Policy <br/>Number: <input type="text" class="input printText" size="30"></td>
in css hide the border of input
#media print
{
#non-printable { display: none!important; }
#printable { display: block; }
.printText{border:none!important;}
}
Add a custom class to that input, let's say print-hidden and Apply css to it using #media like this
#media print {
.print-hidden {
display: none;
}
}
I want to take all the HTML from a div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags.
Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good!
But when a change the information in textareas my javascript code do not take the new information from that field.
What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<?php
if(isset($_POST['save'])){
$scrita = $_POST['hid'];
$scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>');
echo $scritaInsert;
exit; //just for the test
}
?>
<form method="POST">
<input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/>
<input type="hidden" name="hid" id="hid"/>
</form>
<div id="container">
<p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p>
<p style="text-align: center; color: black; font-size:16px; text-decoration: underline;">
The address
</p>
<p style="font-weight: bold; color: black;">
To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="font-weight: bold; color: black;">
Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="text-align: center;font-weight: bold;font-size: 19px;color: black;">
CONTRACT<br>
<n style="text-align: center;font-size: 16px;color: black;">
For transport
</n><br>
<nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea>
Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea>
</nz>
</p>
</div>
</body>
</html>
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think your problem could be the type of html slashes:
Try:
String.prototype.stripSlashes = function(){
return this.replace(/\\(.)/mg, "$1");
}
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content.stripSlashes());
});
I have changed my JavaScript to the following code and it's now working properly:
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
$("textarea").each(function() {
$(this).text($(this).val());
});
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think you should be using the method text() not html(), because html() will just copy all the text including the HTML tag, but text() will only copy the real text.
Check out this fiddle.
I have situation where in my page one text field and a small icon(edit.png) is there. Initially text field is in readonly mode & when I click this edit.png it remove the attribute readonly from text field. It works fine but now I want to do this: When click on edit.png it should remove the attribute readonly from text field as well as the icon itself change to save.png icon. This is my code. Please suggest where should I change to achieve this.
<html>
<head>
<script language="JavaScript">
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
.ic-table-edit { background-image: url("actions-edit.png"); }
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
</p>
<input type="submit" id="toogle" value="OK" />
</body>
Where should I change? Please answer according to my Page.
Here's the edit.
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$('.ic-table-edit').css('background-image', 'url("actions-save.png")');
}
Make sure you have included j query plugin in your code.
With in the anchor tag,include <img> tag.
In toggle function,just change src attribute of your image to new image.
Find the example code below
<html>
<head>
<script>
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$("#image").attr("src","actions-save.png");
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
<img src="actions-edit.png" id="image">
</p>
<input type="submit" id="toogle" value="OK" />
</body>
</html>