Changing a box with buttons - javascript

I am very new to coding and am trying to combine html, css, and javascript for the first time. The task is to have buttons make changes to a box. For example one of my buttons is "grow", in which I want the box to increase in size when the button is clicked.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Watch That Box</title>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<link rel="stylesheet" href="./style.css">
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
Here is my CSS
body {
background-color: aliceblue;
}
.box {
height:150px;
width:150px;
background-color:orange;
margin:25px
}
And no javascript yet. I don't really know where to even start, I know how to combine CSS and HTML, however I am stumped when it comes to adding in the javascript. Any help is appreciated and thank you in advance.

Here is a good place to start.
https://www.w3schools.com/jsref/event_onclick.asp

okay.
javaScript can modify elements (HTML buttons for example) and their properties, like text content AND style (CSS).
first of all, you need to select the element into a variable
let btn = document.querySelector('#grow-btn)
let btn means you're declaring a variable, piece of storage, named btn.
you're putting inside of it the resulte of the expression.
btn.addEventListener("click", function(){/*here you're handling the click*/})
add a listener to the btn, so you can know when a click was made and respond to it.
inside the block you can change some css properties of a box in a similar way

In your button, you add a function 'onclick', like this:
<button id="button1" onclick="growFunction()">Grow</button>
Then, you go to javascript.js and create the growFunction() that will be executed when the button get clicked.
Also, to do the growFunction, either you use no parameters and inside the function you use document.getElementById('button').{your code}, or you pass this parameter, something like:
<button onclick="growFunction(this)">Grow</button>
javascript.js
growFunction(element){
element.yourcode...
}

A few tips to help you get started, first you can make a button do something with the "onClick" HTML attribute, where you might specify a function to execute when the button is clicked. Listeners are how some people do it, but that might be more complex than you're ready for.
<button id="button1" onclick="growBox()">Grow</button>
In your js file, you would define your function:
function growBox() {
let box = document.getElementById("box");
box.style.height = '200px';
box.style.width = '200px';
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/ is a good resource for how things work, and know that just googling things like "how change css with button javascript" can teach you almost anything. Even as a working developer you'll still do this.
Just keep plugging along, this feeling is how all of us started.

Related

How to craft a more elegant implementation

I've made an interface for my students where they click an image and hear the description pronounced via text-to-speech, and the text description appears in a div.
Currently I'm calling the text from the image because the onclick event for the speech only works if it's on the div, and since it's a (this) event I don't understand how to combine the two.
First, is it possible, or "better" - to have a single click on the div trigger both functions, rather than splitting them between the div and the image as I've done? This is the only way I could figure out how to get it all working. So that's the first thing.
Second, I'm re-stating this code every time
jQuery(this).articulate('speak')" data-articulate-append=
How can I make this more economical? In reality I have hundreds of items, and there are a bunch more settings in between the jQuery and data-articulate. I've shortened it for this post but in reality it's much longer and repeated hundreds of times.
Last, is it possible to draw the content for the innerHTML from the data-articulate-append part of the TTS command, since it's the same in every case?
Many thanks, I've spent quite a while constructing what I have so far as I'm new to JS. I'm learning and I've tried to answer these questions myself but it's not yet within my skillset, and sorry if I'm not using all correct terminology in my post. I'm including a stripped-down version of the page here, with just the essentials. Any input is greatly appreciated.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="http://www.clients.brettcolephotography.com/test/jquery-3.1.1.min.js"></script>
<script src="http://www.clients.brettcolephotography.com/test/articulate.min.js"></script>
<link href="http://www.clients.brettcolephotography.com/test/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="elephant">
<img onclick="elephant()" src="http://www.clients.brettcolephotography.com/test/01.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="camel">
<img onclick="camel()" src="http://www.clients.brettcolephotography.com/test/02.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="bear">
<img onclick="bear()" src="http://www.clients.brettcolephotography.com/test/03.jpg">
</div>
</div>
<div id="word">
</div>
<script>
function elephant() {
document.getElementById("word").innerHTML ="elephant";
}
function camel() {
document.getElementById("word").innerHTML ="camel";
}
function bear() {
document.getElementById("word").innerHTML ="bear";
}
</script>
</body>
</html>
You can accomplish this by:
Giving each div a class, for my example its speak. Then add an eventlistener for speak elements. Then in that event listener, you can run multiple functions. You can also get rid of the image's onclick handler.
<div class="speak" data-articulate-append="elephant"><img src="http://www.clients.brettcolephotography.com/test/01.jpg"></div>
<div class="speak" data-articulate-append="camel"><img src="http://www.clients.brettcolephotography.com/test/02.jpg"></div>
<div class="speak" data-articulate-append="bear"><img src="http://www.clients.brettcolephotography.com/test/03.jpg"></div>
$(document).ready(function(){
$(".speak").on("click",function(){
$(this).articulate('speak');
$("#word").html($(this).data("articulate-append"));
});
});

jQuery Appending text from an input into a div when a button is clicked

There's a good chance that might be a repeat question, but I couldn't find an answer that seemed to resolve my problem. I'm trying to make a jQuery bit where text is inputted into a text box, a button is clicked, and the text in the text box gets appended to a div. The end product is to make a game, but for now I'm just trying to make sure that the variable gets stored and put into the div. Here's my HTML
<!DOCTYPE html>
<html>
<head>
<title>Maybe a game maybe</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Please enter your name.</h2>
<form name="userInput">
<input type="text" name="textInput"/>
</form>
<button id="confirm">Confirm</button>
<br/>
<div class="textOutput"></div>
</body>
</html>
Here's my CSS
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}
And here's my jQuery
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
The idea is that text that gets inputted into the textInput box gets stored in the variable playerName. Then a <p> that contains playerName is appended to the .textOutput <div> when the confirm button is clicked. I'm using a Codecademy tutorial to help me confirm this. The code is almost exactly like the code in the tutorial. The only differences are the names of certain items, and the fact that the confirm button is a button and not a div. The code works perfectly fine in the tutorial, but when I try it in a normal editor, it doesn't work at all. I've even tried copying and pasting the exact code in the tutorial into my editor and still doesn't work. The editor I'm using is Sublime Text 2. I can't find what I'm missing here. Thank you very much in advance.
Please replace
<script type="text/javascript" src="script.js"></script>
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and then try you code:
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
I presume you are saving it as text file.
You have to save the file as .html or .htm and wrap the script in <script> tag and wrap the css in <style> tag and then open it in a browser.
you need to include the jquery-library:
put e.g.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
inside the head-tag.
You do not have any jQuery libraries in the head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Your code works, as shown here. http://jsfiddle.net/haxtbh/2gMgQ/

Contents inserted by Javascript is not catching up the styles

Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.

Can't get jQuery UI modal dialog to be modal

I can't get a jQuery UI modal dialog it to work as in the demo! Consider this recipe:
<html>
<head>
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="/javascripts/jquery-ui.js"></script>
</head>
<body>
<p>First open a modal dialog</p>
<p>Then try to hover over me</p>
<p>And <a onclick="alert('clicked!'); return false;" href="alsobroken"> click me!</a></p>
</body>
</html>
While the dialog is active, the second link is correctly disabled but the third link (onclick) still works! Also, the little browser hand appears when hovering both links. This is not like the demo... what am I doing wrong?
As Pointy points out, this is normally controlled by the jQueryUI CSS. But one can get around it by adding slightly hackish snippet to one's CSS file.
.ui-widget-overlay {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
That way the "shroud" div covers up all buttons and there's no need to use the jQueryUI CSS.
The problem is that you're not including the jQuery UI CSS file(s). You get the CSS file from the download package you prepare at the jQuery UI site, or I think you can get the standard "lightness" one from Google. Without the CSS file, the mechanism can't make the "shroud" layer work. Also you may have noticed that the dialog doesn't look like anything; that'll get better too when you add the CSS files.
http://jsfiddle.net/wxyBG/1/

JavaScript question

It is possible not to show html page in user browser until some JavaScript(built-in or in separate file) will be loaded and executed(for page DOM manipulation)?
The easiest thing to do is to set the css variable
display: none;
to the whole page.
then when everything is loaded you can set the display to
display: block; // or something else that suits.
If you make sure that piece of CSS is loaded at the very start of your document it will be active before any html is shown.
if you use a javascript library like jQuery you'll have access to the $(document).ready() function, and can implement a switch over like this:
<html>
<head>
<title>test</title>
<style type="text/css">
body > div {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body > div').css('display', 'block');
});
</head>
<body>
<div>
This will initially be hidden.
</div>
</body>
</html>
Not in the classical way you'd distribute a page. Browsers will (usually) start to display chunks of the base HTML file as it arrives.
Of course, you could simulate this by generating all the HTML on the fly from some included Javascript file. But that doesn't sound like a good plan as it will degrade horribly for people without JS enabled, or if you have a minor bug in your script. A better option might be to style the body tag to display: none and restyle it from the script to make certain parts visible again.
What is it you're actually trying to achieve? It sounds like there's likely to be a better way to do this...
Place the content of HTML page in a DIV, make its diplay none and on load of body diplay it.
<script type="text/javascript">
function showContent() {
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
}
</script>
<body onload="showContent()">
<div id="divBody" style="display: none;">
<--HTML of the page-->
</div>
</body>
Examples of what you might want to do:
Facebook's "BigPipe": http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
This method allows you to load JS first then ASYNC+inject all DOM content.
GMail
Zimbra (open-source web app similar to MS Outlook/Exchange)
My understanding is that you want to run some javascript code before you load the page. In the js file you write your init function and add the eventlistener to the window on "load" event. This will ensure that the init code gets executed first and then you can start displaying the HTML content.
var Yourdomain = {};
YourDomain.initPage = function(){
/* Your init code goes here*/
}
window.addEventListener("load", YourDomain.initPage, false);
All You really need to do is give your element an ID or CLASS and use the dislay: none; property. When your ready to show it just delete it.
CSS:
#div_1 {
display: none;
}
HTML:
<div id="div_1">
<p>This will be the hidden DIV element until you choose to display it.</p>
<p id="js_1"></p>
<script>
var x = "Some Test ";
var y = "Javascript";
document.getElementById("js_1").innerHTML = x + y;
</script>
</div>

Categories