I'm newbie, I want to understand.
Cant output shipping-cost value.
It seems like I'm doing everything right, but I'm not getting the result.
I will be very grateful for your help
Code:
<select class="form-select" name = "shipping" id="country" required>
<option value="">Choose...</option>
<option value="DPD">DPD</option>
<option value="DHL">DHL</option>
<option value="DHL Express">DHL Express</option>
</select>
</label>
<div class="result"></div>
<script type="text/javascript">
const selectElement = document.querySelector('.form-select');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You chose ${event.target.value}`;
});
</script>
<div class="shipping-cost"></div>
<script type="text/javascript">
const shippingCost = document.querySelector('.text-success');
const shippingCostDisplay = document.querySelector('.shipping-cost');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You chose ${event.target.value}`;
switch(event.target.value) {
case 'DPD':
shippingCost.textContent = '$5';
break;
case 'DHL':
shippingCost.textContent = '$10';
break;
case 'DHL Express':
shippingCost.textContent = '$15';
break;
default:
shippingCost.textContent = '$0';
}
shippingCostDisplay.innerHTML = shippingCost.textContent;
});
</script>
It seems like the line <div class="shipping-cost"></div> should be responsible for this, but, unfortunately, it does not perform any function
You are missing <div class="text-success"></div>.
M.Eriksson is correct with his question in the comment.
Why?
Because you are missing div with class text-success, but you are trying to set it's value in switch, hence javascript throughs an error (mentioned by David)
Here is a working example (refactored just a bit your code)
const selectElement = document.querySelector('.form-select');
const shippingCost = document.querySelector('.text-success');
const shippingCostDisplay = document.querySelector('.shipping-cost');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You chose ${event.target.value}`;
switch(event.target.value) {
case 'DPD':
shippingCost.textContent = '$5';
break;
case 'DHL':
shippingCost.textContent = '$10';
break;
case 'DHL Express':
shippingCost.textContent = '$15';
break;
default:
shippingCost.textContent = '$0';
}
shippingCostDisplay.innerHTML = shippingCost.textContent;
});
<form>
<select class="form-select" name = "shipping" id="country" required>
<option value="">Choose...</option>
<option value="DPD">DPD</option>
<option value="DHL">DHL</option>
<option value="DHL Express">DHL Express</option>
</select>
</form>
<div class="result"></div>
<div class="shipping-cost"></div>
<div class="text-success"></div>
I would refactor your task like this:
const selectElement = document.querySelector('.form-select');
const shippingCost = document.querySelector('.text-success');
const shippingCostDisplay = document.querySelector('.shipping-cost');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You chose ${event.target.value}`;
shippingCostDisplay.textContent = shippingCost.textContent = event.target.value;
});
<form>
<select class="form-select" name = "shipping" id="country" required>
<option value="$0">Choose...</option>
<option value="$5">DPD</option>
<option value="$10">DHL</option>
<option value="$15">DHL Express</option>
</select>
</form>
<div class="result"></div>
<div class="shipping-cost"></div>
<div class="text-success"></div>
Related
console img
const num1Element = document.querySelector("#num1");
const num2Element = document.querySelector("#num2");
const resultElement = document.querySelector("#result");
const operatorlememt = document.querySelectorAll("[data-operation]")
function summary() {
if (operatorElememt == "+") {
const sumElement = Number(num1.value) + Number(num2.value);
resultElement.innerHTML = sumElement;
}
}
function multi() {
if (operatorElememt == "*") {
const multiElement = Number(num1.value) * Number(num2.value);
resultElement.innerHTML = multiElement;
}
}
function divide() {
if (operatorElememt == "/") {
const divideElement = Number(num1.value) / Number(num2.value);
resultElement.innerHTML = divideElement;
}
}
function subtraction() {
if (operatorElememt == "-") {
const subtractionElement = Number(num1.value) - Number(num2.value);
resultElement.innerHTML = subtractionElement;
}
}
<div class="container"></div>
<input class="num1" type="text">
<select name="" id="operator" class="operator">
<option data-operation value="-">-</option>
<option data-operation value="+">+</option>
<option data-operation value="/">/</option>
<option data-operation value="*">*</option>
</select>
<input class="num2" type="text">
<button onclick="summary();divide();multi();subtraction()">Click</button>
<br>
<span class="result_con">
<label for="" id="result"></label>
</span>
Console doesn't give any error code or any other result and I am quite new in to the subject. I was expecting a result regarding the selected operation. To select the operation I wrote select section and added the operations. I inteed to keep select part. Thanks in advance
I understand that you are a beginner. There were quiet a few issues with your code. I am attaching the snippet of the changes I made (I wouldn't consider myself an expert either and still may have overlooked something)
<body>
<div class="container"></div>
<input id="num1" type="text">
<select name="" id="operator" class="operator">
<option data-operation value="-">-</option>
<option data-operation value="+">+</option>
<option data-operation value="/">/</option>
<option data-operation value="*">*</option>
</select>
<input id="num2" type="text">
<button onclick="summary();divide();multi();subtraction()">Click</button>
<br>
<span class="result_con">
<label for="" id="result"></label>
</span>
<script>
const num1Element = document.querySelector("#num1");
const num2Element = document.querySelector("#num2");
const resultElement = document.querySelector("#result");
const operatorElememt = document.querySelector("#operator")
function summary() {
if (operatorElememt.value == "+") {
console.log("Adding");
const sumElement = Number(num1Element.value) + Number(num2Element.value);
resultElement.innerHTML = sumElement;
}
}
function multi() {
if (operatorElememt.value == "*") {
const multiElement = Number(num1Element.value) * Number(num2Element.value);
resultElement.innerHTML = multiElement;
}
}
function divide() {
if (operatorElememt.value == "/") {
const divideElement = Number(num1Element.value) / Number(num2Element.value);
resultElement.innerHTML = divideElement;
}
}
function subtraction() {
if (operatorElememt.value == "-") {
const subtractionElement = Number(num1Element.value) - Number(num2Element.value);
resultElement.innerHTML = subtractionElement;
}
}
</script>
</body>
Here are the issues I found:
You are trying to access your input element using a CSS selector for ids but you did not give those elements an id attribute
The select element works like an input element except it has a dropdown and limited options. You just need to get the select element like you would get an input Element. This also includes calling operatorElement.value
You are missing an E when getting the select element :)
And I would suggest instead of different functions, nest your conditions inside one event handler
I want to if you select an option on the brandSelect, the option on the socketSelect will appear, and I have a code like this
<select id="brandSelect" onchange="brandSelect()">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="socketSelect">
<option>Pilih Socket</option>
</select>
and
function brandSelect(){
var x = document.getElementById("brandSelect");
var selectedValue = x.options[x.selectedIndex].value;
switch(selectedValue){
case 10:
break;
case 20:
var x = document.getElementById("socketSelect");
var am4 = document.createElement("option");
var am3 = document.createElement("option");
var am2 = document.createElement("option");
am4.text = "AM4";
am3.text = "AM3";
am2.text = "AM2";
x.add(am4);
x.add(am3);
x.add(am2);
break;
case 30:
break;
}
}
And why my code still won't work?
Your code does not work because in javascript, switch compare value using === which checks for both data type and value, and the value from x.options[x.selectedIndex].value; is string type while you compare with int type. You have to convert your value to integer type before comparing using switch.
<select id="brandSelect" onchange="brandSelect()">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="socketSelect">
<option>Pilih Socket</option>
</select>
<script type="text/javascript">
function brandSelect(){
var x = document.getElementById("brandSelect");
var selectedValue = parseInt(x.options[x.selectedIndex].value); //parse your value to integer
switch(selectedValue) {
case 10:
break;
case 20:
var y = document.getElementById("socketSelect");
var am4 = document.createElement("option");
var am3 = document.createElement("option");
var am2 = document.createElement("option");
am4.text = "AM4";
am3.text = "AM3";
am2.text = "AM2";
y.add(am4);
y.add(am3);
y.add(am2);
break;
case 30:
break;
}
}
</script>
Demo: https://jsfiddle.net/t7umjq2y/
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/
This is what I'm trying to do:
The user selects either option "One" or option "Two".
If the user select "One" the result is 66 + 45 or if the user select "Two" the result is 35 + 45.
How can I implement this using HTML and JavaScript?
This is what I've done so far:
HTML:
<select id="number">
<option>One</option>
<option>Two</option>
</select>
...
// Result
<div id="result"></div>
JAVASCRIPT:
function test(eventInfo) {
var userSelection = document.getElementById("number").value;
if () {
result = 66 + 45;
} else {
result = 35 + 45;
}
var greetingString = userSelection;
document.getElementById("result").innerText = greetingString;
}
Consider:
<select id="number">
<option value="66">One</option>
<option value="35">Two</option>
</select>
then:
result = 45 + +document.getElementById("number").value;
How about this. Set the values in data-attribute and calculate the sum.
<select id="number">
<option value="1" data-Values="66,45">One</option>
<option value="2" data-Values="35,28">Two</option>
</select>
<div id="result"></div>
JS
var values = this.options[this.selectedIndex].getAttribute('data-Values');
var sum = eval(values.split(',').join('+')); //Use with caution eval.
document.getElementById("result").innerHtml = sum;
Demo
Why don't you use value:
<select id="number">
<option value="66+45">One</option>
<option value="35+45">Two</option>
</select>
var greetingString = $("#number option:selected").val();
// or document.getElementById("number").value;
document.getElementById("result").innerText = greetingString;
Use Switch Statement:
Html:
<select id="number">
<option value="66">One</option>
<option value="35">Two</option>
</select>
Javascript:
var userSelection = document.getElementById("number").value;
switch (userSelection)
{
case 66:
result = 66 + 45;
break;
case 35:
result = 35 + 45;
break;
}
You can try this one:
<select id="number" onchange="test(this.value);">
<option value="66+45">One</option>
<option value="35+45">Two</option>
</select>
...
// Result
<div id="result">here</div>
JS
<script>
function test(val) {
document.getElementById("result").innerHtml = val;
}
</script>