When the page loades, it has my list and a show and hide button. However when i go down the list its suppose to display pictures and some text. However my buttons (hide and show) disappear. How to make them appear even when this occurs?
Thanks for the help
function imagechange(image)
{
mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'/>";
mangasummary.innerHTML = changetext(mangasum[image],95);
readmanga.href = mangasite[image];
}
function changetext(text,num)
{
numChar = num;
arrayWord = text.split(" ");
str = "";
strArray = new Array();
newtext = "";
for ( i = 0; i < arrayWord.length; i ++)
{
if (str.length + arrayWord[i].length >= numChar)
{
newtext += str + "<br />";
str = ""
}
if (str.length + arrayWord[i].length <= numChar)
{
str += arrayWord[i] + " ";
}
if (i == arrayWord.length-1)
{
newtext += str+ "<br />";
}
}
return newtext;
}
function hide()
{
document.getElementById("listm").style.display = "none";
<tr>
<td id = "mim" colspan ="2">
<span id = "mangaim">
</span>
</td>
<td id = "min">
Manga List:<br />
<select id= "listm" size = "15" onchange = "imagechange(this.value)">
<option value = "onepiece" id = "po"> One Piece </option>
<option value = "naruto" id = "po" > Naruto </option>
<option value = "bleach" id = "po"> Bleach </option>
<option value = "gintama" id = "po"> Gintama </option>
<option value = "nisekoi" id = "po"> Nisekoi </option>
<option value = "worldtrigger" id = "po"> World Trigger </option>
<option value = "psi" id = "po"> PSI Kusuo Saiki </option>
<option value = "ironknight" id = "po"> Iron Knight </option>
<option value ="stealth" id = "po"> Stealth Symphony </option>
<option value = "illegalrare" id = "po"> Illegal Rare </option>
<option value = "haikyu" id = "po"> Haikyu!! </option>
<option value = "kuroko" id = "po"> Kuroko No Basket </option>
<option value = "assassin" id = "po"> Assassination Classroom </option>
<option value = "shoku" id = "po"> Shokugeki no Soma</option>
<option value = "toriko" id = "po"> Toriko </option>
</select>
</td>
</tr>
<tr>
<td colspan = "2">
<span id="ms">
</td>
</br>
<button onclick = "hide()">Hide</button>
<button onclick = "showlist()">Show List</button>
<script>
mangaimage = document.getElementById("mangaim");
mangasummary = document.getElementById("ms");
readmanga = document.getElementById("rm");
</script>
</body>
Awesome App Beta
The corrected code below works. One potential problem was declaring an array and trying to use it like an object:
var mangasum = new Array();
mangasum["onepiece"] = "some string";
You can actually access arrays using an associative index. As MDN says:
Some people think that you shouldn't use an array as an associative
array. In any case, you can use plain objects instead, although doing
so comes with its own caveats. See the post Lightweight JavaScript
dictionaries with arbitrary keys as an example.
Reference: MDN Arrays
So the error was likely a combination of minor syntax errors and a lot of malformed html. Thanks to browser robustness it limped along regardless. Despite the ugly code, I came to admire OP's willingness to write it himself and at least try ... which is more than I can say about many posts on SO.
I leave it to OP to finish the details and make this an awesome app:
Run Snippet to Test (images omitted)
<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
</head>
<body>
<table>
<tr>
<td id = "mim" colspan ="2">
<span id = "mangaim">
</span>
</td>
<td id = "min">
Manga List:<br />
<select id= "listm" size = "15" onchange = "imagechange(this.value)">
<option value = "onepiece" id = "po"> One Piece </option>
<option value = "naruto" id = "po" > Naruto </option>
<option value = "bleach" id = "po"> Bleach </option>
<option value = "gintama" id = "po"> Gintama </option>
<option value = "nisekoi" id = "po"> Nisekoi </option>
<option value = "worldtrigger" id = "po"> World Trigger </option>
<option value = "psi" id = "po"> PSI Kusuo Saiki </option>
<option value = "ironknight" id = "po"> Iron Knight </option>
<option value = "stealth" id = "po"> Stealth Symphony </option>
<option value = "illegalrare" id = "po"> Illegal Rare </option>
<option value = "haikyu" id = "po"> Haikyu!! </option>
<option value = "kuroko" id = "po"> Kuroko No Basket </option>
<option value = "assassin" id = "po"> Assassination Classroom </option>
<option value = "shoku" id = "po"> Shokugeki no Soma</option>
<option value = "toriko" id = "po"> Toriko </option>
</select>
</td>
</tr>
<tr>
<td colspan = "2">
<span id="ms">
</td>
</tr>
</table>
<button onclick = "hide()">Hide</button>
<button onclick = "showlist()">Show List</button>
<script type="text/javascript">
var mangasum = {
onepiece : "Gold Rogeet coveerso",
bleach : "Ichigo Kurosaki has always be",
stealth : "In a world where elves, dwar",
naruto : "In the village of Konohagakure",
kuroko : "Kuroko is a member from the l",
gintama : "The story focuses on an ecc",
nisekoi : "Raku Ichijou may be the heir to a y",
assassin : "A weird class kicks off in the super",
shoku : "Yukihira Souma's dream is to become a fu",
worldtrigger : "A gate to another dimension has burs",
haikyu : "A chance event triggerer",
illegalrare : "Supernatural creatures live alongside",
psi : "Saiki Kusuo has a wide array of superpowers at his",
ironknight : "A boy with a body like steel encounters the"
}
function imagechange(image) {
mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'>";
mangasummary.innerHTML = changetext(mangasum[image], 95);
readmanga.href = mangasite[image];
}
function changetext(text,num) {
numChar = num;
arrayWord = text.split(" ");
str = "";
strArray = new Array();
newtext = "";
for ( i = 0; i < arrayWord.length; i ++) {
if (str.length + arrayWord[i].length >= numChar) {
newtext += str + "<br />";
str = ""
}
if (str.length + arrayWord[i].length <= numChar) {
str += arrayWord[i] + " ";
}
if (i == arrayWord.length-1) {
newtext += str+ "<br />";
}
}
return newtext;
}
function hide() {
document.getElementById("listm").style.display = "none";
}
function showlist() {
document.getElementById("listm").style.display = "block";
}
var mangaimage = document.getElementById("mangaim");
var mangasummary = document.getElementById("ms");
var readmanga = document.getElementById("rm");
</script>
</body>
</html>
Related
Below are my codes which allows user to select multiple values from the drop down list and when the user clicks the button 'Go' the selected values will be displayed on the new page. I've also created classes for both attributes in order to list the selected values.
Unfortunately, when the button is clicked after selections, nothing is being displayed. Need help on this.
"mainTest.html" page.
< script type = "text/javascript" >
(function() {
/**
* Handles the click of the submit button.
*/
function onSubmitClicked(event) {
var url = 'newPageTest.html?';
var foodbevs = document.getElementsByClassName('foodbeverage');
for (var i = 0; i < foodbevs.length; i++) {
if (i > 0) url += '&';
url += 'foodbeverage=' + encodeURIComponent(foodbevs[i].value);
}
var statuses = document.getElementsByClassName('status');
for (i = 0; i < statuses.length; i++) {
url += '&status=' + encodeURIComponent(statuses[i].value);
}
location.href = url;
}
// Get the button from the DOM.
var submitButton = document.getElementById('btngo');
// Add an event listener for the click event.
submitButton.addEventListener('click', onSubmitClicked);
})();
<
/script>
<!DOCTYPE html>
<html>
<body>
<h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h4>
<table>
<tr>
<td>
<B>Choose a Food/Beverage : </B>
<select class="foodbeverage">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>
</select>
<br/>
<B>Choose a Food/Beverage : </B>
<select class="foodbeverage">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>
</select>
<br/>
</td>
<td>
<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>
<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>
</td>
</tr>
</table>
<br/>
<br/>
<input type="submit" id="btngo" value="Go" />
<br/>
</body>
</html>
"newPageTest.html" page.
< script type = "text/javascript" >
function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}
//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
window.onload = passParameters;
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}
<
/script>
<!DOCTYPE html>
<html>
<body>
<div id="showdata"></div>
</body>
</html>
I find 2 mistake from your code.
Put the window.onload = passParameters; outside of your passParameters function.
For example:
function passParameters() {
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}
window.onload = passParameters;
The parseQuery return {"?foodbeverage":"Chicken Chop","foodbeverage":"Pasta","status":["Dine In","Take Away"]} from input query ?foodbeverage=Chicken%20Chop&foodbeverage=Pasta&status=Dine%20In&status=Take%20Away
You may want to add str = str.substr(1); before var s = str.split("&");
For example
function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
str = str.substr(1);
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}
So I have this project where I have to make a clothing store and I want to do the following:
I have this code in html:
<select class="sizeb" style="display: none;">
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
and with JavaScript I want to take the option value, check it's value and create a var price; then check and set a price:
var x = <somehow to get the value>;
if (x == 'xxs')
price = 5;
else if(x == 'xs')
price = 10;
and display it later this way:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
Any help is appreciated.
First, you just get a reference to the HTML element and assign that to a variable:
var select = document.querySelector(".sizeb");
Then you get the value:
var val = select.value;
Then you do your logic and calculations:
var x = <somehow to get the value>;
if (x == 'xxs'){
price = 5;
} else if(x == 'xs') {
price = 10;
}
And, then display the result:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
NOTE: You have your select to be hidden initially. If that's the case, no one will ever be able to select a value from it.
Now, you also have to decide "when" you want all this to be done. That could be when the value in the select changes. BUt, if that's the case, you should add a first option of something like --- Select One ---, because if the user wants the first selection, they won't do anything, which won't trigger the change event. So, putting it all together, we get:
// Get a reference to the select
var select = document.querySelector(".sizeb");
// Set up an event handler that runs when the value in the select changes:
select.addEventListener("change", function(){
// Then you get the value:
var x = select.value;
var price = null;
// Then you do your logic and calculations.
// And if will work, but for this a switch is better
switch (x) {
case 'xxs' :
price = 5;
break;
case 'xs' :
price = 10;
break;
case 's' :
price = 15;
break;
case 'm' :
price = 20;
break;
case 'l' :
price = 25;
break;
case 'xl' :
price = 30;
break;
case 'xxl' :
price = 35;
break;
}
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
});
<select class="sizeb">
<option value="">--- Select One ---</option>
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
<div id="PriceTag"></div>
You can:
1-Add an listener to the select like this
<select onchange="someFunction(this)" class="sizeb" style="display: none;>
2-create a function like this:
function someFunction(element){
va price = element.value;
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
}
I am trying to make a website that makes a Mario Kart Wii license. For some reason the switch statement always shows a picture of Baby Mario even if I select a different character. This is a work-in-progress project, which is why it does not look done. Here's my code:
$(document).ready(function(){
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
var name = document.getElementById("name");
var favRace = document.getElementById("favRace");
var bgrnd = document.getElementById("bgrnd");
var favChar = document.getElementById("favChar");
switch (favChar.value) {
case "Yoshi":
img = document.getElementById("yoshi");
break;
case "Baby Luigi":
img = document.getElementById("baby_luigi");
break;
case "Baby Daisy":
img = document.getElementById("baby_daisy");
break;
case "Baby Peach":
img = document.getElementById("baby_peach");
break;
case "Baby Mario":
img = document.getElementById("baby_mario");
break;
default:
img = "NULL";
}
$("#create").click(function(){
drawText("Name: " + name.value, 75, 10);
drawText("Favorite Race: " + favRace.value, 75, 20);
drawImg(img, 0, 0, 62, 72);
canvas.style.background = bgrnd.value;
document.getElementById("mainCanvas").style.display = "block";
});
function drawRect(x, y) {
ctx.fillStyle = "green";
ctx.fillRect(x, y, 8, 5);
}
function drawText(text, x, y) {
ctx.fillStyle = "black";
ctx.font = "9px Arial";
ctx.fillText(text, x, y);
}
function drawImg(img, x, y, width, height) {
ctx.drawImage(img, x, y, width, height);
ctx.strokeRect(x, y, width + 4, height + 4);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
}
});
#font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#mainCanvas {
height: 300px;
width: 530px;
border: 2px solid black;
display: none;
}
.img {
display: none;
}
header {
background: -linear-gradient(#EEEEEE, #DDDDDD);
background: -webkit-linear-gradient(#EEEEEE, #DDDDDD);
height: 50px;
margin: -.6%;
padding: 10px;
}
#title {
font-family: Bandits;
font-size: 55px;
color: #585858;
}
body {
background-color: rgb(134, 170, 230);
}
fieldset {
width: 60%;
text-align: left;
}
.yellow {
color: yellow;
}
#license {
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE HTML>
<HTML lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "description" content = "Create Mario Kart Wii Licenses!">
<meta name = "author" content = "Adam Oates">
<meta name = "title" content = "Mario Kart Wii">
<title title = "Mario Kart Wii | License Maker">
Mario Kart Wii | License Maker
</title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.js"></script>
<script type = "text/javascript" src = "main.js"></script>
</head>
<body>
<header>
<div id = "title">
MKWii License Maker
</div>
</header><br><br><br><br>
<section>
<div align = "center">
<form action = "" method = "post">
<fieldset>
Name: <input type = "text" id = "name" placeholder = "Name"><br><br>
Favorite Race: <input type = "text" id = "favRace" placeholder = "Favorite Race"><br><br>
Overall Ranking: <select id = "ranking">
<option id = "e" value = "e">E</option>
<option id = "d" value = "d">D</option>
<option id = "c" value = "c">C</option>
<option id = "b" value = "b">B</option>
<option id = "a" value = "a">A</option>
<option id = "star1" value = "star1">★</option>
<option id = "star2" value = "star2">★★</option>
<option id = "star3" value = "star3">★★★</option>
</select><br><br>
Versus Points: <select id = "vrPoints">
<option id = "1000+" value = "1000+">1000+</option>
<option id = "2000+" value = "2000+">2000+</option>
<option id = "3000+" value = "3000+">3000+</option>
<option id = "4000+" value = "4000+">4000+</option>
<option id = "5000+" value = "5000+">5000+</option>
<option id = "6000+" value = "6000+">6000+</option>
<option id = "7000+" value = "7000+">7000+</option>
<option id = "8000+" value = "8000+">8000+</option>
<option id = "9000+" value = "9000+">9000+</option>
</select><br><br>
Favorite Character: <select id = "favChar">
<option value = "Baby Mario" id = "bm">Baby Mario</option>
<option value = "Baby Luigi" id = "bl">Baby Luigi</option>
<option value = "Baby Peach" id = "bp">Baby Peach</option>
<option value = "Baby Daisy" id = "bd">Baby Daisy</option>
<option value = "Toad" id = "toad">Toad</option>
<option value = "Toadette" id = "tdet">Toadette</option>
<option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
<option value = "Dry Bones" id = "db">Dry Bones</option>
<option value = "Mario" id = "mro">Mario</option>
<option value = "Luigi" id = "lgi">Luigi</option>
<option value = "Peach" id = "pch">Peach</option>
<option value = "Daisy" id = "dsy">Daisy</option>
<option value = "Yoshi" id = "ysh">Yoshi</option>
<option value = "Birdo" id = "bdo">Birdo</option>
<option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
<option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
<option value = "Wario" id = "wro">Wario</option>
<option value = "Waluigi" id = "wlgi">Waluigi</option>
<option value = "Donkey Kong" id = "dk">Donkey Kong</option>
<option value = "Bowser" id = "bwr">Bowser</option>
<option value = "King Boo" id = "kboo">King Boo</option>
<option value = "Rosalina" id = "rlna">Rosalina</option>
<option value = "Funkey Kong" id = "fk">Funkey Kong</option>
<option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
</select><br><br>
Secondary Character: <select id = "secChar">
<option value = "Baby Mario" id = "bm">Baby Mario</option>
<option value = "Baby Luigi" id = "bl">Baby Luigi</option>
<option value = "Baby Peach" id = "bp">Baby Peach</option>
<option value = "Baby Daisy" id = "bd">Baby Daisy</option>
<option value = "Toad" id = "toad">Toad</option>
<option value = "Toadette" id = "tdet">Toadette</option>
<option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
<option value = "Dry Bones" id = "db">Dry Bones</option>
<option value = "Mario" id = "mro">Mario</option>
<option value = "Luigi" id = "lgi">Luigi</option>
<option value = "Peach" id = "pch">Peach</option>
<option value = "Daisy" id = "dsy">Daisy</option>
<option value = "Yoshi" id = "ysh">Yoshi</option>
<option value = "Birdo" id = "bdo">Birdo</option>
<option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
<option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
<option value = "Wario" id = "wro">Wario</option>
<option value = "Waluigi" id = "wlgi">Waluigi</option>
<option value = "Donkey Kong" id = "dk">Donkey Kong</option>
<option value = "Bowser" id = "bwr">Bowser</option>
<option value = "King Boo" id = "kboo">King Boo</option>
<option value = "Rosalina" id = "rlna">Rosalina</option>
<option value = "Funkey Kong" id = "fk">Funkey Kong</option>
<option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
</select><br><br>
Vehichle Used For Favorite Character: <select id = "favKart">
<optgroup label = "Light Weight">
<option value = "Standard Kart S" id = "sks">Standard Kart S</option>
<option value = "Booster Seat" id = "bseat">Booster Seat</option>
<option value = "Mini Beast" id = "mb">Mini Beast</option>
<option value = "Cheap Charger" id = "cc">Cheap Charger</option>
<option value = "Tiny Titan" id = "tt">Tiny Titan</option>
<option value = "Blue Falcon" id = "bf">Blue Falcon</option>
<option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
<option value = "Bullet Bike" id = "bb">Bullet Bike</option>
<option value = "Bit Bike" id = "bitb">Bit Bike</option>
<option value = "Quacker" id = "qkr">Quacker</option>
<option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
<option value = "Jet Bubble" id = "jb">Jet Bubble</option>
<optgroup label = "Medium Weight">
<option value = "Standard Kart M" id = "skm">Standard Kart M</option>
<option value = "Classic Dragster" id = "cd">Classic Dragster</option>
<option value = "Wild Wing" id = "ww">Wild Wing</option>
<option value = "Super Blooper" id = "sb">Super Blooper</option>
<option value = "Daytripper" id = "dtrp">Daytripper</option>
<option value = "Sprinter" id = "sprnt">Sprinter</option>
<option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
<option value = "Mach Bike" id = "machb">Mach Bike</option>
<option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
<option value = "Zip Zip" id = "zip">Zip Zip</option>
<option value = "Sneakster" id = "sneak">Sneakster</option>
<option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
<optgroup label = "Heavy Weight">
<option value = "Standard Kart L" id = "skl">Standard Kart L</option>
<option value = "Offroader" id = "offrdr">Offroader</option>
<option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
<option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
<option value = "Jetsetter" id = "jetstr">Jetsetter</option>
<option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
<option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
<option value = "Flame Runner" id = "frner">Flame Runner</option>
<option value = "Wario Bike" id = "wrobike">Wario Bike</option>
<option value = "Shooting Star" id = "shstr">Shooting Star</option>
<option value = "Spear" id = "spear">Spear</option>
<option value = "Phantom" id = "phntm">Phantom</option>
</select><br><br>
Vehichle Used For Secondary Character: <select id = "favKart">
<optgroup label = "Light Weight">
<option value = "Standard Kart S" id = "sks">Standard Kart S</option>
<option value = "Booster Seat" id = "bseat">Booster Seat</option>
<option value = "Mini Beast" id = "mb">Mini Beast</option>
<option value = "Cheap Charger" id = "cc">Cheap Charger</option>
<option value = "Tiny Titan" id = "tt">Tiny Titan</option>
<option value = "Blue Falcon" id = "bf">Blue Falcon</option>
<option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
<option value = "Bullet Bike" id = "bb">Bullet Bike</option>
<option value = "Bit Bike" id = "bitb">Bit Bike</option>
<option value = "Quacker" id = "qkr">Quacker</option>
<option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
<option value = "Jet Bubble" id = "jb">Jet Bubble</option>
<optgroup label = "Medium Weight">
<option value = "Standard Kart M" id = "skm">Standard Kart M</option>
<option value = "Classic Dragster" id = "cd">Classic Dragster</option>
<option value = "Wild Wing" id = "ww">Wild Wing</option>
<option value = "Super Blooper" id = "sb">Super Blooper</option>
<option value = "Daytripper" id = "dtrp">Daytripper</option>
<option value = "Sprinter" id = "sprnt">Sprinter</option>
<option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
<option value = "Mach Bike" id = "machb">Mach Bike</option>
<option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
<option value = "Zip Zip" id = "zip">Zip Zip</option>
<option value = "Sneakster" id = "sneak">Sneakster</option>
<option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
<optgroup label = "Heavy Weight">
<option value = "Standard Kart L" id = "skl">Standard Kart L</option>
<option value = "Offroader" id = "offrdr">Offroader</option>
<option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
<option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
<option value = "Jetsetter" id = "jetstr">Jetsetter</option>
<option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
<option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
<option value = "Flame Runner" id = "frner">Flame Runner</option>
<option value = "Wario Bike" id = "wrobike">Wario Bike</option>
<option value = "Shooting Star" id = "shstr">Shooting Star</option>
<option value = "Spear" id = "spear">Spear</option>
<option value = "Phantom" id = "phntm">Phantom</option>
</select><br><br>
License Color: <select id = "bgrnd">
<option value = "blue" id = "blue">Blue</option>
<option value = "red" id = "red">Red</option>
<option value = "white" id = "white">White</option>
<option value = "green" id = "green">Green</option>
<option value = "navy" id = "navy">Navy Blue</option>
</select><br><br>
<input type = "button" id = "create" value = "Create License">
</fieldset>
</form><br><br><br>
<canvas id = "mainCanvas"></canvas>
</div>
<img src = "images/yoshi.png" id = "yoshi" class = "img">
<img src = "images/baby_mario.png" id = "baby_mario" class = "img">
<img src = "images/baby_luigi.png" id = "baby_luigi" class = "img">
<img src = "images/baby_daisy.png" id = "baby_daisy" class = "img">
<img src = "images/baby_peach.png" id = "baby_peach" class = "img">
</section>
<footer>
</footer>
</body>
</HTML>
You need to wrap it into event handler, and to get the selected value, like this:
$('#favChar').change(function(){
var favChar = document.getElementById("favChar");
var favorite = favChar.options[favChar.selectedIndex].value;
switch (favorite) {
case "Yoshi":
img = document.getElementById("yoshi");
break;
case "Baby Luigi":
img = document.getElementById("baby_luigi");
break;
case "Baby Daisy":
img = document.getElementById("baby_daisy");
break;
case "Baby Peach":
img = document.getElementById("baby_peach");
break;
case "Baby Mario":
img = document.getElementById("baby_mario");
break;
default:
img = "NULL";
}
});
Show log
I'm trying to get it where a whole two paragraph div can be drawn onto a canvas. I'm mostly having problems with getting the div on a canvas without having to use all of the canvas tags and draw out every line. I think this is possible, let me know if it isn't. I'm intermediate with Javascript and Php, experienced with HTML, but new to canvas so try to keep it simple.
HTML Code:
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Quote It!</title>
<link rel = "stylesheet"
type = "text/css"
href = "passext.css" />
<script type = "text/javascript" src = "js2.js"></script>
</head>
<body>
<h1>It's as easy as One...Two...Three!</h1>
<div id = "instructions">
<p style = "text-align:center;">Instructions:</p>
<ol>
<li>Fill out quote and author fields, then press "Create Quote".</li>
<li>Adjust attributes and watch as it updates in real-time!</li>
<li>Click save and it will convert to a versatile image.</li>
</ol>
</div>
<div id = "tips_warnings">
<p style = "text-align:center;">Tips & Warnings:</p>
<ul>
<li>Don't forget to add quotation marks!</li>
<li>Don't forget a dash before the author.</li>
<li>To create a new quote, hit "Reset", and fill out the form.</li>
</ul>
</div>
<form name = "personalize" id = "personalize">
<fieldset class = "person">
<legend class = "legend">Personalize</legend>
<p>
<label class = "uinfo">Quote (One you make up or one you know):</label>
</p>
<p>
<textarea id = "quote"
rows = "10"
cols = "45"></textarea>
</p>
<p>
<label class = "uinfo">Author:</label>
<input type="text"
id = "write_author"
name = "author"
value = "eg. (-Billy Joe)"
onclick = "this.value = ''"/>
</p>
<p>
<label class = "uinfo">Text Color:</label>
<select id = "selColor" onchange="myFunction()">
<option value = "#ffffff">White</option>
<option value = "#000000">Black</option>
<option value = "#f09dee">Pink</option>
<option value = "#ff0000">Red</option>
<option value = "#1e4d0c">Green</option>
<option value = "#00ff00">Neon Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Text Style:</label>
<select id = "selStyle" onchange = "myFunction()">
<option value = "default">None</option>
<option value = "italic">Italics</option>
<option value = "underline">Underline</option>
<option value = "bold">Bold</option>
</select>
</p>
<p>
<label class = "uinfo">Background Color:</label>
<select id = "selBack" onchange = "myFunction()">
<option value = "null">None</option>
<option value = "#000000">Black</option>
<option value = "#ff0000">Red</option>
<option value = "#00ff00">Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#ffffff">White</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Border:</label>
<select id = "selBorder" onchange="myFunction()">
<option value = "none">None</option>
<option value = "solid">Solid</option>
<option value = "double">Double</option>
<option value = "groove">Groove</option>
<option value = "ridge">Ridge</option>
<option value = "inset">Inset</option>
<option value = "outset">Outset</option>
<option value = "dashed">Dashed</option>
<option value = "dotted">Dotted</option>
</select>
</p>
<p>
<label class = "uinfo">Border Width:</label>
<select id = "selWidth" onchange = "myFunction()">
<option value = "500px">Large</option>
<option value = "375px">Medium</option>
<option value = "250px">Small</option>
</select>
</p>
<p>
<label class = "uinfo">Font:</label>
<select id = "selFont" onchange = "myFunction()">
<option value = "Times New Roman">Times New Roman</option>
<option value = "Serif">Serif</option>
<option value = "Sans-Serif">Sans Serif</option>
<option value = "Fantasy">Fantasy</option>
<option value = "Monospace">Monospace</option>
<option value = "Cursive">Cursive</option>
</select>
</p>
<p>
<label class = "uinfo">Font Size:</label>
<select id = "selSize" onchange = "myFunction()">
<option value = "105%">13pt</option>
<option value = "120%">14pt</option>
<option value = "130%">15pt</option>
<option value = "140%">16pt</option>
<option value = "150%">18pt</option>
</select>
</p>
<p class = "create_quote">
<input type = "button"
value = "Create Quote"
onclick = "myFunction()"/>
<script type = "text/javascript" src = "js2.js"></script>
<input type = "reset"/>
</p>
</fieldset>
</form>
<canvas id = "blank">
<p id = "blank1"></p>
<p id = "author"></p>
</canvas>
<input type = "button"
id = "save"
value = "Save"
onclick = "saveFuction()"/>
<script type = "text/javascript" src = "js2.js"></script>
</body>
</html>
Javascript Code:
function myFunction(){
var quote, quote1, fsize, fsize1, fColor, fcolor1, bcolor, bcolor1, font, font1, width, width1, border, border1, author, author1, author2, format, fstyle, fstyle1;
format = document.getElementById("blank");
var context = format.getContext("2d");
quote=document.getElementById("quote");
quote1=quote.value;
outPut = document.getElementById("blank1");
if (quote1 != "") {
outPut.innerHTML = quote1;
} else {
alert("You need to enter a quote!");
}
author = document.getElementById("write_author");
author1 = author.value;
author2 = document.getElementById("author")
if (author1 == "" || author1 == "eg. (-Billy Joe)") {
alert("Who wrote this?");
} else {
author2.innerHTML = author1;
}
fcolor = document.getElementById("selColor");
fcolor1 = fcolor.value;
format.style.color=(fcolor1);
fstyle = document.getElementById("selStyle");
fstyle1 = fstyle.value;
if (fstyle1 == "italic") {
format.style.fontStyle=("italic");
format.style.textDecoration=("");
format.style.fontWeight=("");
} else if (fstyle1 == "underline"){
format.style.textDecoration=("underline");
format.style.fontStyle=("");
format.style.fontWeight=("");
} else if (fstyle1 == "bold") {
format.style.fontWeight=("bold");
format.style.textDecoration=("");
format.style.fontStyle = ("");
} else if (fstyle1 == "default") {
format.style.fontWeight=("");
format.style.textDecoration=("");
format.style.fontStyle = ("");
}
bcolor = document.getElementById("selBack");
bcolor1 = bcolor.value;
format.style.backgroundColor=(bcolor1);
border = document.getElementById("selBorder");
border1 = border.value;
format.style.border=( border1);
if (border1 == "dashed") {
format.style.borderWidth=("3px");
} else {
format.style.borderWidth=("5px");
}
width = document.getElementById("selWidth");
width1 = width.value;
format.style.width=(width1);
if (width1 == "375px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "962.5px";
}else if (width1 == "250px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "1025px";
}else if (width1 == "500px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "900px";
}
font = document.getElementById("selFont");
font1 = font.value;
format.style.fontFamily=(font1);
fsize = document.getElementById("selSize");
fsize1 = fsize.value;
format.style.fontSize=(fsize1);
}
function saveFunction(){
format.location.href = format.toDataURL();
}
Any help would be appreciated.
You can't draw html elements directly on canvas.
You'll have to learn/use the canvas drawing commands.
However, some people have had success with this library that simulates html elements on canvas:
http://html2canvas.hertzen.com/
You might also want to know that canvas.toDataURL doesn't allow you to save the image data to a user's local file system for security reasons.
Alternatively,
There are many screen-grabbers out there. SnagIt is a good one: http://www.techsmith.com/snagit.html
Check out html2Canvas as markE said, it takes a dom element and converts it to a canvas, and then you can draw that canvas onto another canvas something like this:
http://html2canvas.hertzen.com/
var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);
// do something with canvas
}
}
I'm attempting to create a page that creates a div with two paragraphs, specifically a quote and author. Afterwards, the user can change things like background color, font, font-size, and other attributes. So far everything works good, but then I want to have a save button that turns the div into one image that the user can right-click and save the image. Examples like this include http://www.teacherfiles.com/free_word_art.html and http://cooltext.com/. I looked into some of the script and HTML, but it led me to a dead end. Maybe somebody else can get something out of those? Then I started searching and saw a lot of different answers involving canvas, which I'm new to.
HTML Code:
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Quote It!</title>
<link rel = "stylesheet"
type = "text/css"
href = "passext.css" />
<script type = "text/javascript" src = "js2.js"></script>
</head>
<body>
<h1>It's as easy as One...Two...Three!</h1>
<div id = "instructions">
<p style = "text-align:center;">Instructions:</p>
<ol>
<li>Fill out quote and author fields, then press "Create Quote".</li>
<li>Adjust attributes and watch as it updates in real-time!</li>
<li>Click save and it will convert to a versatile image.</li>
</ol>
</div>
<div id = "tips_warnings">
<p style = "text-align:center;">Tips & Warnings:</p>
<ul>
<li>Don't forget to add quotation marks!</li>
<li>Don't forget a dash before the author.</li>
<li>To create a new quote, hit "Reset", and fill out the form.</li>
</ul>
</div>
<form name = "personalize" id = "personalize">
<fieldset class = "person">
<legend class = "legend">Personalize</legend>
<p>
<label class = "uinfo">Quote (One you make up or one you know):</label>
</p>
<p>
<textarea id = "quote"
rows = "10"
cols = "45"></textarea>
</p>
<p>
<label class = "uinfo">Author:</label>
<input type="text"
id = "write_author"
name = "author"
value = "eg. (-Billy Joe)"
onclick = "this.value = ''"/>
</p>
<p>
<label class = "uinfo">Text Color:</label>
<select id = "selColor" onchange="myFunction()">
<option value = "#ffffff">White</option>
<option value = "#000000">Black</option>
<option value = "#f09dee">Pink</option>
<option value = "#ff0000">Red</option>
<option value = "#1e4d0c">Green</option>
<option value = "#00ff00">Neon Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Text Style:</label>
<select id = "selStyle" onchange = "myFunction()">
<option value = "default">None</option>
<option value = "italic">Italics</option>
<option value = "underline">Underline</option>
<option value = "bold">Bold</option>
</select>
</p>
<p>
<label class = "uinfo">Background Color:</label>
<select id = "selBack" onchange = "myFunction()">
<option value = "null">None</option>
<option value = "#000000">Black</option>
<option value = "#ff0000">Red</option>
<option value = "#00ff00">Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#ffffff">White</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Border:</label>
<select id = "selBorder" onchange="myFunction()">
<option value = "none">None</option>
<option value = "solid">Solid</option>
<option value = "double">Double</option>
<option value = "groove">Groove</option>
<option value = "ridge">Ridge</option>
<option value = "inset">Inset</option>
<option value = "outset">Outset</option>
<option value = "dashed">Dashed</option>
<option value = "dotted">Dotted</option>
</select>
</p>
<p>
<label class = "uinfo">Border Width:</label>
<select id = "selWidth" onchange = "myFunction()">
<option value = "500px">Large</option>
<option value = "375px">Medium</option>
<option value = "250px">Small</option>
</select>
</p>
<p>
<label class = "uinfo">Font:</label>
<select id = "selFont" onchange = "myFunction()">
<option value = "Times New Roman">Times New Roman</option>
<option value = "Serif">Serif</option>
<option value = "Sans-Serif">Sans Serif</option>
<option value = "Fantasy">Fantasy</option>
<option value = "Monospace">Monospace</option>
<option value = "Cursive">Cursive</option>
</select>
</p>
<p>
<label class = "uinfo">Font Size:</label>
<select id = "selSize" onchange = "myFunction()">
<option value = "105%">13pt</option>
<option value = "120%">14pt</option>
<option value = "130%">15pt</option>
<option value = "140%">16pt</option>
<option value = "150%">18pt</option>
</select>
</p>
<p class = "create_quote">
<input type = "button"
value = "Create Quote"
onclick = "myFunction()"/>
<script type = "text/javascript" src = "js2.js"></script>
<input type = "reset"/>
</p>
</fieldset>
</form>
<canvas id = "blank">
<p id = "blank1"></p>
<p id = "author"></p>
</canvas>
<input type = "button"
id = "save"
value = "Save"
onclick = "saveFuction()"/>
<script type = "text/javascript" src = "js2.js"></script>
</body>
</html>
Javascript Code:
function myFunction(){
var quote, quote1, fsize, fsize1, fColor, fcolor1, bcolor, bcolor1, font, font1, width, width1, border, border1, author, author1, author2, format, fstyle, fstyle1;
format = document.getElementById("blank");
var context = format.getContext("2d");
quote=document.getElementById("quote");
quote1=quote.value;
outPut = document.getElementById("blank1");
if (quote1 != "") {
outPut.innerHTML = quote1;
} else {
alert("You need to enter a quote!");
}
author = document.getElementById("write_author");
author1 = author.value;
author2 = document.getElementById("author")
if (author1 == "" || author1 == "eg. (-Billy Joe)") {
alert("Who wrote this?");
} else {
author2.innerHTML = author1;
}
fcolor = document.getElementById("selColor");
fcolor1 = fcolor.value;
format.style.color=(fcolor1);
fstyle = document.getElementById("selStyle");
fstyle1 = fstyle.value;
if (fstyle1 == "italic") {
format.style.fontStyle=("italic");
format.style.textDecoration=("");
format.style.fontWeight=("");
} else if (fstyle1 == "underline"){
format.style.textDecoration=("underline");
format.style.fontStyle=("");
format.style.fontWeight=("");
} else if (fstyle1 == "bold") {
format.style.fontWeight=("bold");
format.style.textDecoration=("");
format.style.fontStyle = ("");
} else if (fstyle1 == "default") {
format.style.fontWeight=("");
format.style.textDecoration=("");
format.style.fontStyle = ("");
}
bcolor = document.getElementById("selBack");
bcolor1 = bcolor.value;
format.style.backgroundColor=(bcolor1);
border = document.getElementById("selBorder");
border1 = border.value;
format.style.border=( border1);
if (border1 == "dashed") {
format.style.borderWidth=("3px");
} else {
format.style.borderWidth=("5px");
}
width = document.getElementById("selWidth");
width1 = width.value;
format.style.width=(width1);
if (width1 == "375px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "962.5px";
}else if (width1 == "250px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "1025px";
}else if (width1 == "500px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "900px";
}
font = document.getElementById("selFont");
font1 = font.value;
format.style.fontFamily=(font1);
fsize = document.getElementById("selSize");
fsize1 = fsize.value;
format.style.fontSize=(fsize1);
}
function saveFunction(){
format.location.href = format.toDataURL();
}
Any help would be appreciated.
Here is some stuff that you can use in your project. See the examples, it can be help. That script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. I hope you make it.
http://html2canvas.hertzen.com/
and here some examples
http://experiments.hertzen.com/jsfeedback/