Im trying to scale an image using variables rather than a set in stone scale. I know using "scale(0.5,0.5)" works but I want to do something like "scale(x,y)" so the scale factor changes depending on what variables x and y are, However when I try doing this, the image will no longer scale like it did when it had a set scale factor. How can I solve this? Thanks for any help. Here's an example of what I mean.
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="img_pulpit.jpg">
<button onclick="myFunction()">Try it</button>
<script>
var a = document.getElementById("myImg");
var d = 5
var e = 10
var f = d/e
var g = 10
var h = 30
var i = g/h
function myFunction() {
document.getElementById("myImg").style.WebkitTransform = "scale(f, i)";
}
</script>
</body>
</html>
Just use string concatenation ("scale(" + f + ", " + i + ")") or string interpolation (`scale(${f}, ${i})`).
function myFunction() {
document.getElementById("myImg").style.WebkitTransform = "scale(" + f + "," + i + ")";
}
You need to use concat the value of f and i
document.getElementById("myImg").style.WebkitTransform = "scale("+f+","+i+")";
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300">
<button onclick="myFunction()">Try it</button>
<script>
var a = document.getElementById("myImg");
var d = 5
var e = 10
var f = d/e
var g = 10
var h = 30
var i = g/h
function myFunction() {
document.getElementById("myImg").style.WebkitTransform = "scale("+f+","+i+")";
}
</script>
</body>
</html>
Related
I am a beginner with Javascript/programming and I am trying to make the "demo2" id change with the 5, 10 or 15 variable chosen in the functions (trigger by the buttons), but it keeps showing "0". What do I have to do?
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative1()">5</button>
<button onclick="alternative2()">10</button>
<button onclick="alternative3()">15</button>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var x = 0;
var y = 0;
function alternative1() {y = x + 5;
document.getElementById("demo").innerHTML = "You have chosen " + y;
}
function alternative2() {y = x + 10;
document.getElementById("demo").innerHTML = "You have chosen "+ y;
}
function alternative3() {y = x + 15;
document.getElementById("demo").innerHTML = "You have chosen "+ y;
}
document.getElementById("demo2").innerHTML = y;
</script>
</body>
</html>
You can’t access variables declared inside a function from outside a function. The variable belongs to the function’s scope only, not the global scope.
It is normal that there is zero because in 'y' there is zero and no operation performed on y.
I hope that this answer will help you to understand what you have done.
You don't need 3 functions for this. You can do it with 1.
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative(this)">5</button>
<button onclick="alternative(this)">10</button>
<button onclick="alternative(this)">15</button>
<p id="demo"></p>
<script>
function alternative(obj) {
document.getElementById("demo").innerHTML = "You have chosen " + obj.innerHTML;
}
</script>
</body>
</html>
Happy learning
You need to change 'demo2 inner' after every operation and need to add new value to 'y' current value (use +=)
var x = 0;
var y = 0;
function alternative(param) {
y += x + param;
document.getElementById("demo").innerHTML="You have chosen "+ param;
document.getElementById("demo2").innerHTML = y;
}
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative(5)">5</button>
<button onclick="alternative(10)">10</button>
<button onclick="alternative(15)">15</button>
<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>
When pressing the button to add the math formula, the MathJax statement does not seem to be interpretet:
const button = document.getElementById('go');
button.addEventListener('click', displayMath, true);
function displayMath() {
const body = document.body;
p = document.createElement('p');
const a = 3, b = 2;
const c = a + b;
const math = "\\(" + a + "+ " + b + " = " + c + "\\)";
p.innerHTML = math;
body.appendChild(p);
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<p>press the button to display math like this: \(a + b = c\)</p>
<button id="go" type="button">Go!</button>
<script src="test.js"></script>
</body>
</html>
1) Can MathJax statements be addet through events like a button click?
2) If not are there better alternatives?
I appreciate any help, thanks :>
You need to run Mathjax parser again, to convert dynamically added expression to math. Here is documentation.
So, what you need to do is run MathJax.Hub.Queue(); method on your new expression. Your code should looks like this:
const button = document.getElementById('go');
button.addEventListener('click', displayMath, true);
function displayMath() {
const body = document.body;
p = document.createElement('p');
const a = 3, b = 2;
const c = a + b;
const math = "\\(" + a + "+ " + b + " = " + c + "\\)";
p.innerHTML = math;
body.appendChild(p);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, p]);
}
And here is working fiddle
This is my code, I have to convert 6 foot 4 inches to meter and am getting the incorrect number. Can someone help?
var INCHES_TO_CM = 2.54;
var CM_TO_METERS = 0.01;
var FEET_TO_INCHES = 12;
function start(){
convertHeightToMeters(6,4);
}
function convertHeightToMeters(feet, inches){
var meters = FEET_TO_INCHES + INCHES_TO_CM * CM_TO_METERS;
println(meters);
}
function convertHeightToMeters(feet, inches) {
return ((feet * FEET_TO_INCHES) + inches) * INCHES_TO_CM * CM_TO_METERS;
}
This is a simple way for beginners.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 id"p1">The conversion</h1>
<script src="myjsfilename.js"></script>
</body>
</html>
The javascript
var conversion = function(foot, inch) {
var inch = inch*2.54;
var foot = foot*30.48;
var result = inch + foot;
result = result/100 + 'm;'
document.getElementById("p1").innerHTML = result;
};
conversion(6, 4);
And an example of how you can turn this into a very simple website (https://conversionfttom.000webhostapp.com/)
I am not able to fix the following:
<html>
<head>
<title>Test</title>
<script>
function myFunction(arr) {
var N = [0,1,2,3,4,5,6,7,8,9];
for (var s in N) {
var pattern = new RegExp('/^[A-z]et_[' + s + ']_\\d/');
// NOTE I get the following, is that how it should be?
// window.alert(pattern); => /\/^[A-z]et_[0]_\d\//
// NOTE: I checked that it works fine for a single digit case, say:
// var pattern = new RegExp(/^[A-z]et_[3]_\d/);
var newarr = arr.filter(elt => pattern.test(elt));
document.getElementById("demo").innerHTML = newarr;
}}
</script>
</head>
<body>
<div id="demo" onclick="myFunction(['aaaLet_0_0', 'Let_1_99', 'Let_2_', 'Let_3_99', 'Pet_2_', 'Pet_3_99', '_9_33']);">click here</div>
<hr>
<p>expected output: Let_1_99, Let_3_99, Pet_3_99</p>
</body>
</html>
I see many similar questions, but I have not been able to find out how to fix my code. It should be possible, shouldn't it?
EDIT
the following is what I need:
<html>
<head>
<title>Test</title>
<script>
var newarr = [];
function myFunction(arr) {
var N = [0,1,2,3,4,5,6,7,8,9];
for (var s in N) {
var pattern = new RegExp('^[A-z]et_' + s + '_\\d'); // NOTE: not /
var lnewarr = arr.filter(elt => pattern.test(elt));
if(typeof lnewarr !== 'undefined' && lnewarr.length > 0){newarr.push(lnewarr)};
}
document.getElementById("demo").innerHTML = newarr;
}
</script>
</head>
<body>
<div id="demo" onclick="myFunction(['aaaLet_0_0', 'Let_1_99', 'Let_2_', 'Let_3_99', 'Pet_2_', 'Pet_3_99', '_9_33']);">click here</div>
<hr>
<p>expected output: Let_1_99, Let_3_99, Pet_3_99</p>
</body>
</html>
(sorry if my post is mostly code. Hope it may helps somebody out there.)
Instead of for loop you can use a .join like this:
var pattern = new RegExp('^[A-Za-z]et_[' + N.join('') + ']_\\d');
//=> /^[A-Za-z]et_[0123456789]_\d/
This works for the case when you have singe character values in your array N.
For generic use you can use this expression:
var pattern = new RegExp('^[A-Za-z]et_(?:' + N.join('|') + ')_\\d');
//=> /^[A-Za-z]et_(?:0|1|2|3|4|5|6|7|8|9)_\d/
Using a for loop you can do this:
var N = [0,1,2,3,4,5,6,7,8,9];
var str='(?:';
for (var s in N)
str += s + '|';
str = str.replace(/\|$/, ')');
var pattern = new RegExp('^[A-Za-z]et_' + str + '_\\d');
//=> /^[A-Za-z]et_(?:0|1|2|3|4|5|6|7|8|9)_\d/
I want to get client width of firstChild
Css
.ot{width:100px;height:200px}
JS
var ra = document.getElementsByClassName("r")[0];
var n = ra.firstChild.clientHeight;
var ca = n ;
HTML
<div class="r"><div class="ot"></div></div>
want to get the height of ot through class r, why not ca is showing 200
Use firstElementChild instead of firstChild.
It is working. You can read more about HTML DOM Here. http://www.w3schools.com/jsref/dom_obj_all.asp
var ra = document.getElementsByClassName("r")[0];
var n = ra.firstChild.clientHeight;
var ca = n ;
alert(ca);
.ot{width:100px;height:200px}
<div class="r"><div class="ot"></div></div>
Try to add this toy your code, should show a current height of desired div:
HTML:
<p id="demo"></p>`
<button onclick="myFunction()">Try it</button>
JavaScript:
function myFunction() {
var ra = document.getElementsByClassName("r")[0];
var n = ra.firstChild.clientHeight;
document.getElementById("demo").innerHTML = n;
}
CSS:
.ot{width:100px;height:200px}
Try with the working snippet, i have modified your code , just Run this snippet , you can check with your first child height and width
var ra = document.getElementsByClassName('r')[0];
var n = ra.getElementsByTagName('div')[0];
alert( 'width is =' + n.clientWidth + ' , and height = ' + n.clientHeight );
.ot{
width:100px;
height:200px
}
<div class="r">
<div class="ot"></div>
</div>