I am trying to use .innerHTML to overwrite a p. The first time i do it, it overwrites it successfully however when i try it a second time it doesn't seem to work. I planned to put in some CSS in the future, so thats is empty. THIS IS THE JAVASCRIPT
function create() {
var x = document.getElementById("cName").value;
var y = document.getElementById("cType").value;
window.alert("Running new card")
newCard(x,y)
}
function newCard(name,type) {
window.alert("new card ran")
this.name = name;
this.type = type;
}
function print(){
document.getElementById("cardName").innerHTML = this.name
document.getElementById("cardType").innerHTML = this.type
}
THIS IS THE HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<title>TealeStone</title>
</head>
<body>
<script src="JavaScript.js"></script>
<form name="newCard">
Card Name : <input type="text" id="cName" />
Card Type : <input type="text" id="cType" />
<button onclick="javascript:create()">Submit</button>
</form>
<p id="cardName">Card name</p>
<p id="cardType">Card type</p>
<script>
print()
</script>
</body>
</html>
Related
I'm trying to pass an input value from page to the another page..
Using local storage was useful, but when I'm trying to change the value in the second page it doesn't changed, I want to be able to change it..
html code for the first page
<html>
<head>
<title>
Input Form
</title>
<link rel="stylesheet" href="style.css" />
<script>
function handleSubmit () {
const name = document.getElementById('name').value;
const surname = document.getElementById('surname').value;
localStorage.setItem("NAME", name);
localStorage.setItem("SURNAME", surname);
return;
}
</script>
</head>
<body>
<form action="result.html" method="POST">
<input type="text" id="name" name="name" placeholder="Enter name.." />
<input type="text" id="surname" name="surname" placeholder="Enter surname.." />
<input type="submit" onclick="handleSubmit()"/>
</form>
</body>
</html>
html code for second page
<html>
<head>
<title>
Result Page
</title>
<link rel="stylesheet" href="style.css" />
<script>
window.addEventListener('load', () => {
const name = sessionStorage.getItem('NAME');
const surname = sessionStorage.getItem('SURNAME');
document.getElementById('result-name').value = name;
document.getElementById('result-surname').value = surname;
})
</script>
</head>
<body>
<h1>
Result Page
</h1>
<h2>
Name: <input id="result-name" />
</h2>
<h2>
Surname: <input id="result-surname" />
</h2>
</body>
</html>
You are using local storage to set the item. You need to use local storage to get the item. Not session storage.
I am talking about these lines here:
const name = sessionStorage.getItem('NAME');
const surname = sessionStorage.getItem('SURNAME');
I changed it for you. Just copy paste the whole page and you are good to go.
<html>
<head>
<title>
Result Page
</title>
<link rel="stylesheet" href="style.css" />
<script>
window.addEventListener('load', () => {
const name = localStorage.getItem('NAME');
const surname = localStorage.getItem('SURNAME');
document.getElementById('result-name').value = name;
document.getElementById('result-surname').value = surname;
})
</script>
</head>
<body>
<h1>
Result Page
</h1>
<h2>
Name: <input id="result-name" />
</h2>
<h2>
Surname: <input id="result-surname" />
</h2>
</body>
</html>
Read on local storage vs session storage. They are bit different.
I have 2 buttons, the first is named btnClient and the following is btnSort. When, I enter 3 names, I would like to sort alphabetically.
I have to use the method sort()but it doesn't work.
In HTML
<body >
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
In JS
var arrayClient = new Array();
var buttonClient = document.getElementById('btnClient');
var buttonDisplay = document.getElementById('btnSort');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient(){
var i = 0;
arrayClient[i] = document.getElementById('nameClient');
i = i + 1;
document.getElementById('nameClient').value = ' ';
}
function display()
{
arrayClient.sort();
}
My btnSort button has a problem, nothing happening, even by clicking on button btnSort.
var arrayClient = new Array();
var buttonClient = document.getElementById('btnClient');
var buttonDisplay = document.getElementById('btnSort');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient(){
var i = 0;
arrayClient[i] = document.getElementById('nameClient');
i = i + 1;
document.getElementById('nameClient').value = ' ';
}
function display()
{
arrayClient.sort();
}
<html>
<head>
<script src="Thing.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body >
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
</html>
Use push method to add values to your array after clicking the bntClient button,
After clicking on sort you will see these values being sorted and displayed in the console.
Your second input is meaningless.
const arrayClient = []
const buttonClient = document.getElementById('btnClient');
const buttonDisplay = document.getElementById('btnSort');
const firstInput = document.getElementById('nameClient');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient() {
arrayClient.push(firstInput.value.trim());
firstInput.value = '';
}
function display() {
arrayClient.sort();
console.log(arrayClient);
}
<html>
<head>
<script src="Thing.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body>
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
</html>
I'm trying to create a signature block generator for my company, and I need to be able to output the name of individuals twice. Once in the outgoing email, and another in the reply. I've tried using GetElementByID, and that works fine for one, but not two. I've tried GetElementsByName, but failed. https://codepen.io/jggrs/pen/paZyrN
<html>
<head>
<script type="text/JavaScript">
function getOption(){
var firstlast = document.getElementById("firstlast").value;
display_firstlast.innerHTML= firstlast;
}
</script>
</head>
<body>
<form>
First and Last Name: <input type="text" id = "firstlast">
<input type="button" onclick="getOption()" value="Make My Signature">
</form>
<!--NAME AND TITLE-->
<p>My name is <span id = "display_firstlast"></span></p>
<p>My name is <span id = "display_firstlast"></span></p>
</body>
</html>
Always use class for stuff like that
1- get all elements by class name
2- convert it to a array so you can loop in it ([].slice.call() convert a HTMLCollection to a array)
3- change the innerHTML of each
<script type="text/JavaScript">
function getOption(){
var firstlast = document.getElementById("firstlast").value;
var list = [].slice.call(document.getElementsByClassName('display_firstlast'));
list.forEach(function(item){
item.innerHTML= firstlast
});
}
</script>
</head>
<body>
<form>
First and Last Name: <input type="text" id = "firstlast">
<input type="button" onclick="getOption()" value="Make My Signature">
</form>
<!--NAME AND TITLE-->
<p>My name is <span class="display_firstlast"></span></p>
<p>My name is <span class="display_firstlast"></span></p>
</body>
</html>
what is going here is that an id in javascript must be unique to one and only one element, However, this can be done by assigning a class to the both p tags or by simply:
<script type="text/JavaScript">
function getOption(){
var firstlast = document.getElementById("firstlast").value;
document.geElementById('display_firstlast').innerHTML= firstlast;
document.geElementById('display_firstlast2').innerHTML = firstlast;
}
</script>
<p>My name is <span id = "display_firstlast"></span></p>
<p>My name is <span id = "display_firstlast2"></span></p>
document.querySelectorAll('button')[0].addEventListener('click', function() {
var name = document.querySelectorAll('input')[0].value;
var items = Array.prototype.slice.call(document.querySelectorAll('#display_firstlast'));
for ( var e of items ) {
e.innerHTML = name;
}
});
<p>My name is <span id = "display_firstlast"></span></p>
<p>My name is <span id = "display_firstlast"></span></p>
<div><input type="text" value="A Name" /> <button>Set Name</button></div>
As many people have said you SHOULD be using classes for that; however, you can also do this if you really need it as an id =>
document.querySelectorAll('#display_firstlast')
that should get both elements.
Let's teach you some better coding practices:
//<![CDATA[
/* external.js */
var doc, bod, M, I, Q, S, old = onload; // for use on other pages - read note below
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
Q = function(selector){
return doc.querySelectorAll(selector);
}
S = function(selector){
return doc.querySelector(selector);
}
var firstLast = I('first_last'), opt = I('opt'), out = I('output'), o1 = out.firstChild, o2 = o1.nextSibling;
I('form').onsubmit = function(){
return false;
}
opt.onclick = function(){
if(firstLast.value){
o1.innerHTML = o2.innerHTML = 'My name is '+firstLast.value;
}
}
firstLast.onfocus = function(){
o1.innerHTML = o2.innerHTML = '';
}
} // end onload
//]]>
/* external.css */
html,body{
padding:0; margin:0;
}
body{
background:#000; overflow-y:scroll;
}
.main{
width:940px; background:#aaa; padding:20px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<form id='form' name='form'>
<input id='first_last' name='first_last' type='text' />
<input id='opt' name='opt' type='button' value='Make My Signature' />
</form>
<div id='output'><div></div><div></div></div>
</div>
</body>
</html>
Separate your HTML, CSS, and JavaScript, so it can be cached.
This is my first time using this site sorry if it's in the wrong form.
When I execute the function I get the error message "Uncaught TypeError: object is not a function onclick"
HTML
<!DOCTYPE html>
<html>
<header>
<link src="Style.css" type="text/css">
<link src="Js.js" type="text/javascript">
</header>
<head><img src="logo.jpg">Clubs</head>
<div>
<input type="text" id="studentNumber">
<input type="password" id="studentPassword">
<button id="submit" onclick="submit();">Submit</button>
<p id="studentInfo"></p>
</div>
<div>
<input type="text" id="firstName" placeholder="First Name">
<input type="text" id="lastName" placeholder="Last Name">
<input type="text" id="number" placeholder="Student Number">
<input type="password" id="password" placeholder="Password">
<input type="button" id="enter" placeholder="New User" onclick="enter()">
</div>
</html>
Javascript
function enter(){
var pie = document.getElementById("newUser").value + 1;
var first = document.getElementById("firstName").value;
var last = document.getElementById("lastName").value;
var numb = document.getElementById("number").value;
var password = document.getElementById("password").value;
}
var newUser = [];
var pie = 0;
var first = [];
first[0] = studentfirstname;
var last = [];
last[0] = studentlastname;
var numb = [];
numb[0]
= studentnumber;
This:
<link src="Js.js" type="text/javascript">
is not how you import JavaScript. You want
<script src="Js.js"></script>
The enter() function is undefined because your script isn't being loaded at all.
The code in your script, even if successfully imported, won't do anything. The var declarations in your enter() function hide the external declarations of the global variables.
try loading your js like this:
<head>
<link src="Style.css" type="text/css">
<script language="javascript" type="text/javascript" src="Js.js"</script>
</head>
instead of
<header>
<link src="Style.css" type="text/css">
<link src="Js.js" type="text/javascript">
</header>
your studentfirstname and other similar variables looks like not defined.
I am using a JavaScript function called showDate() that is passed a parameter (called id). I am trying to get the function to display the date with the innerHTML property that is passed to the function in the function call.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>My bored html</title>
<script type = "text/javascript">
function showDate(id)
{
document.getElementById(id).innerHTML = Date();
}
</script>
</head>
<p id = "Datepara" style = "font-family:comic sans ms;color:orange;text-align:center;font-size:25px;">
Date: 24/9/12 <br /><br /><br/>
</p>
<input type = "button" onclick = "showDate(Datepara)" value = "Display today's date" />
</body>
</html>
Change
showDate(Datepara)
by
showDate('Datepara')
Otherwise you're passing the html element and not just the id.
You need to quotes around the element's id string:
<!DOCTYPE html>
<html>
<head>
<title>My bored html</title>
<script type = "text/javascript">
function showDate(id)
{
document.getElementById(id).innerHTML = Date();
}
</script>
</head>
<p id = "Datepara" style = "font-family:comic sans ms;color:orange;text-align:center;font-size:25px;">
Date: 24/9/12 <br /><br /><br/>
</p>
<input type = "button" onclick = "showDate('Datepara')" value = "Display today's date" />
</body>
</html>
The best way to do it is:
<input type = "button" onclick = "show Date('Datepara')" value = "Display today's date" />
I hope this is helpful.