I have an html and javascript files
function saved() {
"use strict";
var description;
description = document.getElementById("description").value;
}
function savedd() {
"use strict";
var due_date;
due_date = document.getElementById("due_date").value;
}
function saverd() {
"use strict";
var reminder_date = document.getElementById("reminder_date").value;
}
document.getElementsByClassName("result").innerHTML = "My new text!";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=.5, maximum-scale=1, minimum-scale=1, width=device-width" />
</head>
<body>
<div style="margin:0 auto;text-align:center">
<!-- Div align in the middle -->
<div style="margin-left:auto;margin-right:auto;text-align:center">
<form>
Description:<br>
<input type="text" name="description" onchange="saved()"><br>
<br>
<br>
Due Date:<br>
<input type="date" name="due_date" onchange="savedd()" ><br>
<br>
<br>
Reminder Date: <br>
<input type="text" name="reminder_date" onchange="saverd()"><br>
</form>
</div>
<div class="result"> PlaceHolder</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type='text/javascript' src="editpage.js"></script>
</body>
</html>
I want it to eventually replace the PlaceHolder text with the Description stored data so that I know that that part of the script is working properly so I can call on it later, but now it just sticks to saying PlaceHolder
Change getElementsByClassName("result") to getElementsByClassName("result")[0]. Your original call returns a collection of nodes, you want to set the innerHTML on a specific node.
Here's a fixed version of your snippet:
document.getElementsByClassName("result")[0].innerHTML = "My new text!";
<div style="margin:0 auto;text-align:center">
<!-- Div align in the middle -->
<div style="margin-left:auto;margin-right:auto;text-align:center">
<form>
Description:
<br>
<input type="text" name="description" onchange="saved()">
<br>
<br>
<br>Due Date:
<br>
<input type="date" name="due_date" onchange="savedd()">
<br>
<br>
<br>Reminder Date:
<br>
<input type="text" name="reminder_date" onchange="saverd()">
<br>
</form>
</div>
<div class="result">PlaceHolder</div>
</div>
Related
I am trying to make a simple calculator, that adds 2 numbers together with the press of a button. I have got the HTML part done, but I have no clue how to make the button add the numbers. I have tried using the event listener, but I was probably missing something. If you could, please write the script, while explaining the most important lines of code. Thank you!
<html>
<head>
<title>A calculator... I guess?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<!-- Inputs -->
<p>1st number</p>
<input type="number" id="one">
<p>2nd number</p>
<input type="number" id="two>">
<!-- Button -->
<br>
<br>
<button id="add">Calculate</button>
<!-- Result -->
<p>Result</p>
<input type="text" id="result">
</div>
</div>
<script>
</script>
</body>
</html>
<html>
<head>
<title>A calculator... I guess?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<!-- Inputs -->
<p>1st number</p>
<input type="number" id="one">
<p>2nd number</p>
<input type="number" id="two">
<!-- Button -->
<br>
<br>
<button id="add" onClick={calculate()}>Calculate</button>
<!-- Result -->
<p>Result</p>
<input type="text" id="result">
</div>
</div>
<script>
var elementOne =document.getElementById('one');
var elementTwo =document.getElementById('two');
function calculate(){
one = parseInt(elementOne.value)
two = parseInt(elementTwo.value)
document.getElementById('result').value = one + two;
}
</script>
</body>
</html>
The script is very easy, are u new to JS? The script is here below with explanation as you asked for -
//create the function which will run on button click
function calculate() {
var firstNumber = document.getElementById("one").value; //Get the value of the first input and store it in firstNumber variable
var secondNumber = document.getElementById("two>").value; //Get the second one's now
firstNumber = parseInt(firstNumber); //Convert both variables from string to integer for we get variables if string datatype when getting the value from an input
secondNumber = parseInt(secondNumber);
var result = firstNumber + secondNumber; //Add the 2 numbers and store the result in a variable
document.getElementById("result").value=result; //Print the "result" variable in the input you want it to get printed in
}
<html>
<head>
<title>A calculator... I guess?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<!-- Inputs -->
<p>1st number</p>
<input type="number" id="one">
<p>2nd number</p>
<input type="number" id="two>">
<!-- Button -->
<br>
<br>
<button id="add" onclick="calculate()">Calculate</button> <!--Onclick attribute determines the function to run on click of the element the attribute is in-->
<!-- Result -->
<p>Result</p>
<input type="text" id="result">
</div>
</div>
<script>
</script>
</body>
</html>
I adapted your html to contain a form. Forms are used for user interaction like entering numbers.
<html lang="en">
<head>
<title>A calculator... I guess?</title>
<script src="AddScript.js" rel="script"></script>
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<form >
<!-- Inputs -->
<label for="one">1st number</label><br>
<input type="number" id="one" >
<br>
<label for="two">2nd number</label> <br>
<input type="number" id="two">
<!-- Button --><br>
<br>
<button id="add">Calculate</button>
<br>
<br>
<!-- Result -->
<label for="result">Result</label><br>
<input type="text" id="result">
</form>
</div>
</div>
</body>
</html>
and the javascript. You need to use Number() to convert the text to integers
window.onload = init
function init(){
const button = document.getElementById("add")
button.addEventListener("click", addTwoNumbers)
}
function addTwoNumbers(e){
e.preventDefault()
const one = document.getElementById("one")
const two = document.getElementById("two")
const totalSum = Number(one.value) + Number(two.value)
const result = document.getElementById("result")
result.value = totalSum
}
i am trying to take title input and create slug using it. But if the title is not written in English like "আমার প্রথম পোস্ট" then the slug input will remain empty. The code is given below. hope someone can help. Not good at javascript .
document.getElementById("title").addEventListener("keyup", function() {
if (/^[a-zA-Z]+$/.test(this.value)) {
$(document).on('blur', '#title', function(){
var TitleInput = $('#title').val().toLowerCase().trim();
TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '-');
var SlugInput = $('#slug').val(TitleInput);
});
} else {
document.getElementById("show_lang_in_here").innerHTML = "Different language";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
</body>
</html>
I have modified your code to do what I believe you're after, these are the main changes:
Wait for the document to be loaded with $(document).ready()
I've expanded your regex to allow numbers and spaces as valid English /^[a-zA-Z0-9 ]+$/ (There's a lot more you can add to this, it's quite difficult to detect exactly what is valid English)
You were creating an event listener inside your if, instead of actually executing the code (You can listen for multiple events by including them in the .on('keyup blur') string)
$(document).ready(function() {
$('#title').on('keyup blur', function() {
if (/^[a-zA-Z0-9 ]+$/.test($(this).val())) {
var titleInput = $(this).val().toLowerCase().trim().replace(/[^a-z0-9-]+/g, '-');
$('#slug').val(titleInput);
} else {
$('#show_lang_in_here').text('Different language');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
What you are doing is replacing by -
If you want to remove everything, change it to TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');
document.getElementById("title").addEventListener("keyup", function() {
if (/^[a-zA-Z]+$/.test(this.value)) {
$(document).on('blur', '#title', function(){
var TitleInput = $('#title').val().toLowerCase().trim();
TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');
var SlugInput = $('#slug').val(TitleInput);
});
} else {
document.getElementById("show_lang_in_here").innerHTML = "Different language";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
</body>
</html>
I want to get the total sum to display at the bottom of my document of 3 items based on their price and quantity. For example item 1 is worth $5, item 2 is worth $7 and item 3 is worth $11. I need a function and editing on my html input tags so I can display the full total if I where to choose different quantities per item.
This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="app.js"></script>
</head>
<body>
<h1>Marios Pest Control</h1>
<form>
<ul class="myList">
<img src="Blue_Goomba_SMWU.png" class="imgCenter">
<li>Goombas: 5 Coins (ea.)<l1> <br>
Total Number:
<input id="goombasInp" type="number" name="Total Number Of">
<button>add</button>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<img src="635-6354796_mkdd-bob-omb-bomba-de-tiempo-virus.png">
<li>Bob-ombs: 7 Coins (ea.)<li>
Total Number:
<input id="bob-ombsInp" type="number" name="Total Number Of">
<button>add</button>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<img src="1200px-DeepCheepNSLU.png">
<li>Cheep-cheeps: 11 Coins (ea.)</li>
Total Number:
<input id="cheep-cheepsInp" type="number" name="Total Number Of">
<button>add</button>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
</ul>
<p id="myP">Click Submit To Get The Total:</p>
<button id="wrapper" onclick="myFunction()">Add Total</button>
</form>
<footer class="myFooter">
<p>Marios Pest Control</p> 2410 Birch Ave Lubbock, Tx 79404 <p>url: mariospestconrol.com <p>email: someone#example.com.</p>
</footer>
</body>
</html>
you can use this variant of myFunction() to get your thing done:
function myFunction(event) {
event.preventDefault();
let goombas = document.getElementById("goombasInp");
let bobombs = document.getElementById("bob-ombsInp");
let cheeps = document.getElementById("cheep-cheepsInp");
goombas = goombas.value * 5;
bobombs = bobombs.value * 7;
cheeps = cheeps.value * 11;
document.getElementById("myP").innerHTML += goombas+bobombs+cheeps;
}
document.querySelector("button#wrapper").addEventListener('click', myFunction);
I'll recommend/suggest you to remove: onclick="myFunction()", from your button, and move your script tag at the end of the file, right before you close
I am creating an app to send an object to a class in Parse, but the data in the form is being passed and nothing happens. I can submit data directly from the function showAlert, but no alert appears after setNotification and and showALert is used. Here is my code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>You're message has now been submited.'</p>
</div>
</div>
<div class="login">
<form class="login-form" name="login-form">
<h2>Compose Message</h2>
<input type="text" name="school" id="school" placeholder="School Code" />
<p> </p>
<input type="text" name="name" id="name" placeholder="Name" />
<p> </p>
<input type="text" name="password" id="password" placeholder="Message" />
<p> </p>
<input type="button" value="Set Notification" onClick="setMessage();">
<p> </p>
<input type="button" value="Send Notification" onClick="showAlert();">
</form>
</div>
<script type="text/javascript">
function setMessage (){
var textField = form.school.value
var textField1 = form.name.value
var textField2 = form.password.value
}
function showAlert() {
Parse.initialize("appkey", "javascript key");
var TestObject = Parse.Object.extend(textField);
var testObject = new TestObject();
testObject.save({teacher: textField1), message:textField2)}, {
success: function(object) {
$(".success").show();
alert('The Message has been sent!');
},
error: function(model, error) {
$(".error").show();
alert('There has been an error.');
}
});
}
</script>
</body>
</html>
I am dusting off my Javascript knowledge to create an page that syncs to an iOS app. Any help is greatly appreciated!
I'm having a little 'teething' problem here is my code so far
<form name="job_app">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
<script language="text/JavaScript">
if (document.job_app.source.GAZ.checked){
document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
}
else if (document.job_app.source.JCP.checked){
document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>
what i want this to do is create (or unhide) the issue or ref text box depending on which radio button is selected without creating multiple text boxes.
sorry for any inconvenience if this is a rookie mistake, i have never worked with java before nor a language like it.
This is the working code as of 07:15 26/05/2012 as thanks to Amy McCrobie.
It has undergone some edits since Amy's version (see below) i have moved all scripts above the form to make adding the next few fields easier, added a statement for word of mouth, omitted <head> as that is part of index.php and meta.php while this is for form.php, added a spacer and made the function name more specific.
index.php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<?php
include './meta.php';
?>
</head>
<?php
/*if(isset($_POST['submit'])){
include './submit.php';
}
else{*/
include './form.php';
//}
?>
</html>
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>
form.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
function showHide_source(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('WOM').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'block';
}
}
</script>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/>
<div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
<div class="hideable" id="src_spEl"></div>
rest of form
<input...
.../>
</form>
style.css
div.hideable{
height: 62px;
}
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
</script>
<title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/>
<div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
}
}
</script>
</body>
</html>
I would suggest jQuery, it's not hard to learn, in fact I find it much easier than basic javascript
also I would go the route of two textboxes that are hidden, and then showing them via jQuery
as it stands now I think if the user checks one radio button and then the other two text boxes will appear
and with jQuery added (which is as easy as including the sript at the top of your page your code would be more like this...
<form name="job_app">
Source?<br/>
<input id="GAZ" type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input id="JCP" type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input id="WOM" type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
Issue <br/><input id="issue" type="text" name="issue" /><br/><br/>
Issue <br/><input id="ref" type="text" name="ref" /><br/><br/>
<script language="text/JavaScript">
$("#issue").css("display","none");
$("#ref").css("display","none");
if ($("#GAZ").checked){
$("#issue").css("display","inline");
$("#ref").css("display","none");
}
if ($("#JCP").checked){
$("#issue").css("display","none");
$("#ref").css("display","inline");
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>