CODEWITHSUNDEEP
javascripthtml
user974725
user974725

Reputation: 153

How can I alter the values of a variable with onclick multiple times?

I'm a JS newbie, recently I found an SDK for creating augmented reality apps with html/css/js called wikitude. When you see below, you'll see a button that when clicked calls the scaleModel function which then creates new values for the scale property which will allow the 3d model my app displays increase in size. I'd just like to be able to create a button that will increase the value each time I press it and the another button that will decrease the value each time I press it. This way I will have two buttons, one for increasing the size and another for decreasing. I would very much so appreciate your help.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My ARchitect World</title>
<script src="architect://architect.js"></script>
<script>
var model;
var location;

function createModel()
{
AR.logger.activateDebugMode();
AR.logger.info("info");

var modelOptions = {
    scale: {x: 0.1, y: 0.1, z: 0.1},
    rotate: {heading: -30},
    rotate: {tilt: 30},
    translate: {y: -0.5}
};

model = new AR.Model("my3dModel.wt3", modelOptions);
location = new AR.RelativeLocation(null, 0, -50, 0);
var myGeoObject = new AR.GeoObject(location, {drawables: {cam: model}});
}

function scaleModel() {
model.scale.x = 0.5;
model.scale.y = 0.5;
model.scale.z = 0.5;
}

</script>
</head>

Create Anim Scale

Upvotes: 0

Views: 282

Answers (1)

Tim Heap
Tim Heap

Reputation: 1711

If you make a new function like the scaleModel() function that multiplies the scale by an amount instead of setting it:

function scaleModelBy(amount) {
    model.scale.x = model.scale.x * amount;
    model.scale.y = model.scale.y * amount;
    model.scale.z = model.scale.z * amount;
}

You can then call it in some buttons:

<button onclick="scaleModelBy(2);">Scale up</button>
<button onclick="scaleModelBy(0.5);">Scale down</button>

Upvotes: 1

Related Questions