I'm relatively new to coding and I'm trying to get number values from an HTML number input and then use that value in JavaScript.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Phone Price Calculator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/phonePrice.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<p>How much money is in your bank account?</p><p>$ <input type="number" id="money" placeholder="ex. 9250.00"></input></p>
<p>How much are you willing to spend on a new phone?</p><p>$ <input type="number" id="newPhone" placeholder="ex. 130.00"></input></p>
<button type="button" id="spendButton">Spend Money!</button>
<p>Tax is 8.25%</p>
<hr>
<p id="total">Total: </p>
<script src="../js/phonePrice.js"></script>
</body>
</html>
--JavaScript--
let button = document.querySelector("button");
let money = document.getElementById("money").value;
let newPhone = document.querySelector("#newPhone").value;
let tax = 0.0825;
let total = document.getElementsByName("total");
button.addEventListener("click", function (){
console.log(money);
console.log(newPhone);
});
Both of my console.log statements return an empty string. I want to be able to set the variables to whatever input the user sets and then use those values (numbers) in my functions. Any help is greatly appreciated.
You assign values to money and newPhone when the script is loaded.
Then the user types something into the fields (which changes the values in the fields, but not in the variables) and clicks the button (which is when you use the values you collected earlier).
Collect the values when the button is clicked instead of when the script is loaded.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="Description" content="C.V"/>
I have added code below to render in IE but will not work.
<!--[if lt IE 9]>
<script src="Assets/html5shiv/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type= "text/css" href="Assets/aboutme.css"/>
if you want to target all versions of IE(except 10) use this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
For IE 10 check this:
IE 10 Specific Styles
hope it helps.
EDIT:
and last, check this for IE 11 & 12+(EDGE) Detect Internet Explorer (IE) up to version 11 and Edge (12+)
I've been trying to get this work in my angular project, searching over the internet and it seems none of the possibles answers are helping me.
My console says:
Scripts may close only the windows that were opened by it.
Because I'm trying to close my current window with a button.
<button onclick="window.close();">Close window</button>
and of course the reasons is described at the console message. I can not close this window because this was not opened by javascript. At the first time my close window button was inside a ng-view and didn't work, after that I've moved my button to my index page outside the ng-view getting the same result :(
After those changes and other more that I've been found on internet, I've created a project from scratch, simple app, basically working just with the ng-app on index.html and a couple of controller that do nothing. AND this button works.
This works:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
</head>
<body ng-controller="MyController">
<button onclick="window.close();">Close window</button>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="MyControllers.js"></script>
</html>
This is not working:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>my web</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-nav-bar></my-nav-bar>
<div ng-view></div>
<button onclick="window.close();">Close window</button>
<script src="libs/jquery.js"></script>
<script src="libs/angular.js"></script>
<script src="libs/myapp/myapp.js"></script>
<script src="libs/myapp/mycontroller.js"></script>
<script src="libs/myapp/mydirectives.js"></script>
</body>
</html>
It says scripts may close only the windows that were opened by javascript but can anyone makes me notice if there any diference between this two html? if it's not, How the first html is following this rule and the second one doesn't'?
Bootstrap 3 is not working or broken on Win 7 IE Version - 8.0.7600.16385
URL : http://getbootstrap.com/
It seems the respond.js or html5shiv is not working on this specific version of IE 8. But its working fine on IE v8.0.7601 and IE v8.0.6001 (Via Sauce labs)
Here is the HTML (head part) All files are on correct path.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>OHH Web App</title>
<!-- Bootstrap -->
<link href="media/css/bootstrap.css" rel="stylesheet">
<!-- Structure: Global -->
<link href="media/css/global.css" rel="stylesheet">
<!-- Modernizr (Should be on Head)-->
<script type="text/javascript" src="js/modernizr.js"></script>
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/respond.js"></script>
<![endif]-->
</head>
Any Idea how to fix this? or is this a known bug in this version? Thanks for your help
Attached screenshot.
HTML5.js only wokr on server side, but sometimes its get problem with some other scripts. please check your CSS properties, and if that does not help. try add manually some script to force html5 elements, like this
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--[if lt IE 8]>
var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');
for (var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
<![endif]-->
Please check does evrything works in ie8, and check any error logs, maybe some script is forcing the problem.If you are didint sure about your css, please check this
http://css3pie.com/
It can help you a lot properly write your css for older browsers
thanks for reading.
I have a simple problem that i can't solve. I just need to have a html map with Jquery fadeIn and fadeOut effects. I got it and it works everywhere except with IE8.
So i just wanna add a pure javascript already tested and working just when IE8 is present.
Obviously i tried writing this code but is not working even with a simple alert after the IE comment.
Can you help please?
Here's the code, thanks!
<script type="text/javascript">var runFancy = true;</script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
alert(runFancy);
function showIt(name)
{
document.getElementById('map_image').src='immagini/distributori/8/'.concat(name).concat('.png');
document.getElementById('map_image').style.display='block';
}
function hideIt()
{
document.getElementById('map_image').src='immagini/distributori/8/map.png';
};
</script>
<![endif]-->
Here's the code for other browsers
<!--[if !IE]><!-->
<script type="text/javascript">
//alert('hi'); not working even just this
if (runFancy) {
function showIt(name)
{
document.getElementById('map_image').src='immagini/distributori/single/'.concat(name).concat('_single.png');
$('#mapon').fadeIn(400);
}
function hideIt()
{
$('#mapon').fadeOut(300);
};
}
</script>
<!--<![endif]-->
even this is not working, any advice?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body style="background-color:red">
<h1>Ciao</h1>
<!--[if IE]>
<style language="text/css">
body{background-color:black;}
</style>
<![endif]-->
</body>
</html>
not working with every IE version.
This will help you:
HTML:
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head></head>
<body></body>
</html>
Javascript:
<!--[if IE 8]>
<script type="text/javascript" src="IE8.js">
<![endif]-->
the code you have should be working but if you want to target just IE 8 put IE 8 instead of just IE like so
<!--[if IE 8]>
do stuff
<![endif]-->
edit: removed depreciated jquery solution
So I've got a an HTML5 website setup and I've been programming a for of language toggle
The site always starts like this...
<!DOCTYPE html>
<!--[if IE 7]><html lang="fr" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="fr" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="fr" class="no-js">
I'm building a language detection script and I'm trying to cache
<html lang="fr" class="no-js">
Or more specifically the "fr" and "en" into a variable upon the activation of my script...
How would I go about fetching the language declaration into a variable?
var lang = document.documentElement.getAttribute("lang");
or just
var lang = document.documentElement.lang;