I have started trying to make simple HTML and CSS webpages while incorporating a bit of JavaScript. I'm trying to make a simple print button that doesn't show up when you print it. I've searched around SA for various answers and I've seen a lot of things about the link media= "print". In the stylesheet would be a class where you would write either display: none or visibility: hidden. You would then apply that to your button.
The problem is that when I try doing it, it doesn't turn invisible when the page preview pops up. Here is my main code:
<link rel="stylesheet" href="print.css"
type="text/css" media="print" />
<script type = "text/javascript">
function newPerson(firstname, lastname, age, gender, birthmonth, birthdate) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.gender = gender;
this.birthmonth = birthmonth;
this.birthdate = birthdate;
this.birthyear = birthdayCalculate;
}
function birthdayCalculate() {
var date = new Date();
var CurYear = date.getFullYear()
var CurMonth = date.getMonth()
var birthyear = CurYear - this.age
if (this.birthmonth > CurMonth) {
birthyear --
}
return birthyear
}
function testFunction(form) {
var firstName = form.firstName.value
var lastName = form.lastName.value
var Age = form.Age.value
var Gender = form.Gender.value
var birthMonth = form.birthMonth.value
var birthDate = form.birthDate.value
var new1 = new newPerson(firstName, lastName, Age, Gender, birthMonth, birthDate)
var person = new1.firstname + " " + new1.lastname + " is " + new1.age + " and is " + new1.gender + " and was born on "
+ new1.birthmonth + "/" + new1.birthdate + "/" + new1.birthyear() + "." + "<br />"
document.write(person);
winVar = window.open();
winVar.document.write(person);
winVar.focus();
winVar.document.write(
"<input type='button' " +
"onClick= 'window.print();'" +
"value ='Print This Page' " +
"class = 'print' " +
"/>");}
</script>
I think you'd be able to tell I used forms. I don't think I need to show you this. The print .css is extremely simple too:
.print{
visibility: hidden
}
Does anyone see anything wrong with my script? A little something else, I'm using Google Chrome.
css will not help in this case use javascript instead. You have to do something like this:
assume this is your print button
<input type="button" value="print" onclick="this.setAttribute('hidden''hidden')"/>
hide the button when it clicked using the setAttribute function.
hope it will work..
Related
I am brand new to JavaScript and embarrassed to say that I can't figure this out. I am trying to create a website that parses first and last names to output email addresses. I moved the onclick() function outside the onload() and that has only created more issues. Any help would be greatly appreciated. I apologize for my ignorance.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Email Address Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h3>Enter your first and last name and then click the button below to get your Email Account info.</h3>
</header>
<main>
<section class="inputarea">
<p>First Name: <input type="text" id="fname"></p>
<p>Last Name: <input type="text" id="lname"></p>
<button id="genemail">Generate Email</button></section>
<section class="outputArea"></section>
</main>
<br><hr>
<footer id="by-line">CIS 425 - JavaScript Practice</footer>
<script src="script.js"></script>
</body>
</html>
JavaScript:
window.onload = function() {
//alert("Just finished loading the webpage in the window.");
}
document.getElementById("genemail").onclick = processForm(){
// alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
If you want assign function to onclick event directly you should use an anonymous function:
document.getElementById("genemail").onclick = function(){
// alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
If you don't want use an anonymouse function and your function is parameterless then define your function separately and assign it:
function processForm(){
// alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
document.getElementById("genemail").onclick = processForm;
The line document.getElementById("genemail").onclick = processForm(){ is the problem, you can not name the function processForm here. If you change it to the keyword function it works just fine, see this fiddle: https://jsfiddle.net/jsk0byvu/
You can try the below code in JavaScript:
document.getElementById("genemail").addEventListener("click", processForm, false);
function processForm(){
alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
I am trying to solve the below Javascript kata on Codewars but getting "undefined". Can please someone show me the light on what exactly is "undefined". I am struggling to understand what is missing form my code below. Cheers.
Link to challange: https://www.codewars.com/kata/training-js-number-5-basic-data-types-object
I've searched through FreeCodeCamp JS OOP and Basic tutorials / lessons to find similar problems. Searched through StackOverflow, Reddit, and Googled many websites for similar challanges.
Code below:
function animal(name, legs, color) {
this.name = name;
this.legs = legs;
this.color = color;
}
var dog = new animal("dog", 4, "white");
// similar variables set such for other animal objects.
animal.prototype.toString = function animalToString() {
var sent = "This " + this.color + " " + this.name + " has " + this.legs + " legs.";
return sent;
}
return animal.prototype.toString.call();
Expected: This white dog has 4 legs., instead got: undefined
Try this:
function animal(obj){
var newAnimal = {
name: obj.name,
legs: obj.legs,
color: obj.color
};
return "This " + newAnimal.color + " " + newAnimal.name + " has " + newAnimal.legs + " legs.";
}
The purpose of this kata I believe is to introduce you to javascript objects. The issue is thrown when you changed the inputs of the function "animal". If you look at the sample tests in the lower right corner, the inputs being fed into the function you are trying to make should accept only one parameter which is an object with properties name, legs, and color. You changed this input into three separate parameters instead of just one.
Or you could skip the assignment altogether and just access the input directly like so:
function animal(obj){
return "This " + obj.color + " " + obj.name + " has " + obj.legs + " legs.";
}
1) Based on 'instructions'
Give you a function animal, accept 1 parameter obj like this: {name:"dog",legs:4,color:"white"} and return a string like this: "This white dog has 4 legs."
function animal({name, legs, color}) {
return `The ${color} ${name} has ${legs} legs.`;
}
2) Based on what you're supposed to learn
function animal({name, legs, color}) {
this.name = name;
this.legs = legs;
this.color = color;
}
animal.prototype.toString = function animalToString() {
return `The ${this.color} ${this.name} has ${this.legs} legs.`;
}
var dog = new animal({name:"dog", legs:4, color:"white"});
dog.toString();
function animal(obj){
return `This ${obj.color} ${obj.name} has ${obj.legs} legs.`
}
You can try this
function animal(obj){
var a={name:"dog",legs:4,color:"white"}
return "This" + " " + a.color + " " +a.name + " " + "has" + " " + a.legs + " " + "legs.";
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I will be adding a list of contacts and put them in a div based on first character of lname. If the div doesn't exists, it will be created dynamically. I'd want to display the contact information on clicking the name. In the following implementation, showMe( ) function not working to display the contact information .
<html>
<head>
<style>
.holder{
background-color:yellow;
margin-top:10px;
width: 300px;
}
.holder span{
background-color: Green;
height:20px;
color:white;
}
</style>
<script>
var contacts =[];
function getInfo() {
var firstName = prompt("Enter first name");
var lastName = prompt("Enter last name");
var emailId = prompt("Enter Email ID");
var phoneNo = prompt("Enter Phone number");
var person ={
fname : firstName,
lname : lastName,
email : emailId,
phone : phoneNo
};
contacts.push(person);
var currPerson = contacts[contacts.length-1]; //take the last pushed object from the array
var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase();
if(!document.getElementById(lastNameFirstChar + "_holder")){
document.getElementById("mydiv").innerHTML += "<div id='"+lastNameFirstChar+"_holder' class='holder'><span>"+lastNameFirstChar+"</span></br></div>";
}
//document.getElementById(lastNameFirstChar + "_holder").innerHTML += currPerson.fname+" "+currPerson.lname + "<br/>";
document.getElementById(lastNameFirstChar + "_holder").innerHTML += "<span onclick='showMe(" + currPerson.id + ")'>" + currPerson.fname + " " + currPerson.lname + "</span><br/>";
}
function showMe(id) {
alert(id);
var person = contacts[id]; /* currently corresponds to array index, could be a property lookup with underscore or whatever */
var contactInfo = person.fname+" "+person.lname+"</br> "+person.email+"</br>"+person.phone;
target.innerHTML = "<div>" + contactInfo + "</div></br>";
}
</script>
</head>
<body>
<button onclick="getInfo()">Get Person Info</button>
<p>----------------------------</p>
<div id="mydiv">
</div>
</body>
</html>
<script>
var contacts = [];
function getInfo()
{
var firstName = prompt("Enter first name");
var lastName = prompt("Enter last name");
var emailId = prompt("Enter Email ID");
var phoneNo = prompt("Enter Phone number");
var person = {
fname: firstName,
lname: lastName,
email: emailId,
phone: phoneNo
};
contacts.push(person);
var currPerson = contacts[contacts.length - 1]; //take the last pushed object from the array
var id = contacts.length - 1;
var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase();
if (!document.getElementById(lastNameFirstChar + "_holder"))
{
document.getElementById("mydiv").innerHTML += "<div id='" + lastNameFirstChar + "_holder' class='holder'><span>" + lastNameFirstChar + "</span></br></div>";
}
//document.getElementById(lastNameFirstChar + "_holder").innerHML += currPerson.fname+" "+currPerson.lname + "<br/>";
document.getElementById(lastNameFirstChar + "_holder").innerHTML += "<span onclick='showMe(" + id + ")'>" + currPerson.fname + " " + currPerson.lname + "</span><br/>";
}
function showMe(id)
{
//alert(id);
var person = contacts[id]; /* currently corresponds to array index, could be a property lookup with underscore or whatever */
var contactInfo = person.fname + " " + person.lname + "</br> " + person.email + "</br>" + person.phone;
mydiv.innerHTML = "<div>" + contactInfo + "</div></br>";
}
</script>
When you call showMe() function you are supposed to send the id of the person by currPerson.id
but when you defined var person you didn't give it the id property.
you have this
var person = {
fname: firstName,
lname: lastName,
email: emailId,
phone: phoneNo
};
make it like this
var person = {
id: contacts.length,// note this extra parameter
fname: firstName,
lname: lastName,
email: emailId,
phone: phoneNo
};
now when you call
"<span onclick='showMe(" + currPerson.id + ")'>"
currentPerson.id will not be undefined anymore.
Secondly when you call this line
target.innerHTML = "<div>" + contactInfo + "</div></br>";
you haven't defined the variable "target".
add this line before the above line
var target= document.getElementById("mydiv")
where "myDiv" is the id of what you defined in the html markup
<div id="mydiv">
On paper this paper this seems like a very simple operation, but for some reason Javascript does not seem to like it. Basically I have the following code:
var news = "<b>" + place_name + ", " + county + ""<img id = 'centre' src=" + picture + ">" + "</b><ul><br>";
The general idea is that picture is a variable that will be filled later via:
news.picture = entry2.picture;
which is a link to provide to the img source. However, when I do:
console.log(news.picture);
The variable remains undefined. Is this the correct way to go about things?
That's not the way you are supposed to do that. You have to have your variables set and then you can construct a string like that.
What you need now, is basically a function, like this:
var createNews = function(place_name,county,picture) {
return "<b>" + place_name + ", " + county + "<img id = 'centre' src=" + picture + ">" + "</b><ul><br>";
}
var news = createNews("Place","county","pic.jpg");
console.log(news);
Or you can do it like this, if you prefer:
var createNews = function(obj) {
return "<b>" + obj.place_name + ", " + obj.county + "<img id = 'centre' src=" + obj.picture + ">" + "</b><ul><br>";
}
var news = {
place_name : "Someplace",
county : "Somewhere",
picture : "foo.png"
};
var newsItem = createNews(news);
console.log(newsItem);
news is a variable made out of strings and variables.
So you cant use news.picture.
Though you can make the variable a function object.
var news = function() }
this.picture = "something";
this.getString = function() {
return this.picture+"some string";
};
};
Then you can get and set the picture variable inside news with news.picture and get the string with news.getString().
Hai,
I am trying to understand few concepts in JavaScript. Consider the following code:
function Person(name, age)
{
this.name = name || "no name";
this.age = age || "age not specified";
this.printStr = function()
{
console.log("< " + this.name + ", " + this.age + " >");
};
}
p = new Person("pranav", 26);
p.printStr = function()
{
console.log("this works. also ...." + this.name);
};
p.printStr();
I want to call the implementation of 'printStr' in Person class from within the implementation of 'printStr' function in 'p'.
such that the output should be:
< pranav, 26 >
this works. also ....pranav
Any ideas? :)
The way your code is set up now, you can't do it. When you call Person as a constructor, the object that ends up being p gets set to this. So when you define printStr in the constructor, p gets an attribute called printStr. You then over-write it when you assign the second function.
Two options: A non-answer is to do what pablochan did - have the internal one be called oldPrintStr. Another option is to use the prototype inheritance:
function Person(name, age)
{
this.name = name || "no name";
this.age = age || "age not specified";
}
Person.prototype.printStr = function() {
console.log("< " + this.name + ", " + this.age + " >");
};
Then you can do this:
p = new Person("pranav", 26);
p.printStr = function()
{
Person.prototype.printStr.apply(this);
console.log("this works. also ...." + this.name);
};
p.printStr();
As far as I know there is no real subclassing in JS so to do this you should probably save the old function and then replace it.
p = new Person("pranav", 26);
p.oldPrintStr = p.printStr;
p.printStr = function()
{
p.oldPrintStr();
console.log("this works. also ...." + this.name);
};
p.printStr();
unless you save Person's printStr you can always create a temp Person object solely to extract printStr and call it:
p.printStr = function()
{
print("this works. also ...." + this.name);
(new Person()).printStr.apply(this);
};
but I guess you'll be better off if you make Person's original printStr accessible via prototype:
Person.prototype.printStr = function()
{
print("< " + this.name + ", " + this.age + " >");
};
then you have no need for temp object or saving old function and can do:
Person.prototype.printStr.apply(this);