how can i combine javascript variables inside html - javascript

i was wondering how to change a picture's size with a dynamic variable, but i cant make it work for some reason. here is my code:
i have a variable named picH inside my javascript block:
var picH = 2;
and then i have my html code which supplies the image with the height property:
img src="img/1.png" height="picH"
I tried to supply the variable but it doesn't seem to work. the size does change if i enter a number instead.

Ok so first off as sad as it may be, I agree with the mean comments above that you should probably just read a few HTML and JavaScript tutorials. jQuery is probably a good way to go but believe it or not back in the olden days we used JavaScript without the benefit of fancy frameworks. I'd say what you're driving at is something a little more like this:
<html>
<head>
<title>Webpage</title>
</head>
<body>
<img src="img/1.png" id="theIDofTheImage">
</body>
</html>
<script>
var picH = 2;
var imageElement = document.getElementById("theIDofTheImage");
imageElement.height = picH;
</script>
Of course I'm sure you're doing something a little more complicated but I wanted to just give a simplistic answer to your question.
Cheers!
~JI

Related

Button code preference

Im new to Javascript and this site. Below are 2 codes (only HTML, normal i work with external js files) which deliver a button what you can click for a date. I was wondering which code has the preference amongst the developers and is there any advantage from 1 another? The way i see it is that adding a function is overkill.
Code 1
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
Code 2
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">The time is?</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
The second one is way better, you are separating the js from the html.
If you have two buttons with the same function, it will be easier to avoid duplicated code and to maintain with the second version!
For example if you want to change the behaviour of your buttons, you won't have to modify your html and be able to change the beviour every where at once.
In my opinion the correct answer here is neither of both.
To write maintainable and readable code, the best practice is to have a complete separation between HTML, CSS and JavaScript. Making the assumption that "it's only one line", is pretty dangerous, as one line quickly becomes two and so on. It's better to always use the same rules instead of making exceptions for one-liners.
Personally, I would write HTML like this:
<button class="time-button"></button>
<p id="demo"></p>
<script src="script.js"></script>
In script.js, you can then attach an event listener like this:
// Note that querySelector might not be supported in really old browsers
var timeButton = document.querySelector('.time-button');
var demoParagraph = document.getElementById('demo');
// Or attachEvent for IE < 11
timeButton.addEventListener('click', timeFunction);
/**
* Here you can write some beautiful comments about the function
*/
function timeFunction (eventData) {
demoParagraph.innerHTML = new Date().toISOString();
}
In case you write it like that you can start listening (addEventListener) and stop listening (removeEventListener) whenever you want to.
It's recommended to put the elements in a variable, since looking up an element is pretty slow.
I'd say :
Both are correct depending on what you want to do with it.
First way : OK if the function is short and not complex, no re-use purpose.
Second way : OK if the function is complex, need to be maintained and plus : you can re-use it and avoid code duplication.
Now another approach is to extract javascript methods in another .js file.

change innerHTML to nearby document

I would like to have a section of my webpage's contents to change upon a button click. However, the content I'd like to have change includes formatting itself, and I would prefer to have the content in a separate document.
I would like it to look something like this, but I'm okay with any solution:
<html>
<head>
<script type="text/javascript">
function swap() {
document.getElementById('toChange').innerHTML = '<!--#include virtual="../newContent.htm"-->';
}
</script>
</head>
<body>
<span id="toChange">Temp Text</span>
<input type="button" onclick="swap()" value="Change" />
</body>
</html>
The problem is obviously with the include statement in swap() but I don't know how to change it appropriately. Thanks.
Basically server side includes don't work in this context; you will have to resort to AJAX requests.
You didn't tag your question with jquery, but you could read up what it does behind the scenes:
function swap() {
$('#toChange').load('../newContent.htm');
}
jQuery.load() reads the contents from ../newContent.htm using an AJAX call and then stores that HTML inside the toChange span.
As far as I know your probably going to need JSON and AJAX for your request. I do know that changing the data content without making a new request is what JSON and AJAX are used for mostly. It will update the page dynamically without reloading. JSON is built-in to Javascript so your actually on the right path. Hopefully it helps somewhat.

Javascript Error in Chrome: Me, something I'm missing or a bug in Chrome?

I doubt the last option, but probably one of the first two. Can anybody tell me which?
I'm getting the error in the screen shot.
<html>
<head>
<script type="text/javascript">
var html = "<script></script>";
</script>
</head>
<body>
</body>
</html>
This is a problem in every browser, the script block is terminated at the first string </script>, so if that string appears in your code anywhere it will cause a premature termination of the script block.
If you want to have this as a variable in JS, use:
var html = unescape("%3Cscript%3E%3C/script%3E");
You can also use \ to render that character correctly:
var html = "<script><\/script>";
That's no bug. It's the correct behaviour for a script tag, what you're doing is the equivalent of not escaping a quote in a string.
var string = 'My mother's awesome.';
An easy way to fix your issue is to break apart the </script> tag, like so:
var html = "<script></"+"script>";

Javascript to rotate between pages within ONE HTML page

I would like some help displaying contents (to different pages) within one HTML page using JavaScript.
This is a sample of what I have found so far: http://www.swan10.nl/stuff/test.htm however instead of displaying "FAQ question #blabla" in the box every time a link is clicked, I would like to display words and images like a normal content. Is there a way to do this?
I tried removing the CreateDiv function and replacing it with HTML codes but it doesn't work.
Thank you in advance :)
Umm, well you would need to use AJAX to pull the data into the page and display it in whatever method you choose. If you want to use a framework look into JQuery. It has nice AJAX functions. Otherwise read HERE
After re-reading your post I think you might just want to choose which div is displayed on a form at one time. This you can achieve by placing all of your divs in the same container. Then toggle their display css property.
Using jQuery it's as simple as
$('#divname').load('/path/to/file.html');
Note that the result should probably not include <html> and <head> tags (although you don't seem like you care about well formed HTML code).
I should probably also mention that you shouldn't make the client load content for you, that's what server side code is for.
Personally I would use the innerHTML property on one of your elements. It will allow you to add markup to that element. Check it out here: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
<html>
<head>
<title>Multiple DIV</title>
<style type="text/css">
DIV#db {
border : 1px solid blue;
width : 400px;
height : 400px;
}
</style>
<script type="text/javascript">
var Content = new Array();
Content[0] = '<i>test1</i>';
Content[1] = '<b>test2</b><br><img src =http://www.w3schools.com/images/w3schoolslogo.gif>';
Content[2] = '<u>test3</u>';
Content[3] = '<s>test4</s>';
function Toggle(IDS) {
document.getElementById('db').innerHTML = Content[IDS];
}
</script>
</head>
<body onLoad="Toggle(0,10)">
FAQ #1
FAQ #2
FAQ #3
FAQ #4
<p />
<div id="db"></div>
</body>
</html>
I updated it to work all javascripty with the innerHTML

Wikipedia-like references without JavaScript?

I have a blog with annotated references like [1] that.
[1]Jake Smith. http://example.com ..............
[2].............
I want it so the [1] in the text is an anchor that links to the [1] in the References. I know I could do this by doing something in the text like [1]and then making every list item in the references have an id, , that is, that is,
<ol>
<li id="ref1"></li>
...
</ol>
But that's a lot of work for me to go through all the blog posts. I'm sure I could make a JavaScript or jQuery function to add this functionality, but then it would not work with JavaScript disabled. So is there some other function I don't know? Like some fancy CSS trick, or should I just use JavaScript to do this?
What are your recommendations?
You could have the links inline so it displays normally when the user has JavaScript disabled. With JavaScript on, just style it as a Wikipedia reference.
Demo: http://jsfiddle.net/6A8nX/
Your options are:
A blog plugin that detects this in the content and forms the link and adds the related id to the appropriate element for you when the HTML is being output
A script that runs and does the same thing after the HTML has loaded.
Manually adding the links by hand.
A blog plugin is your best bet, since surely this is a solved problem (though it would depend on your blogging platform, of course).
CSS is for styling, it can't add links/ids.
In addition, remember that if you are ever going to display multiple blog posts on each page, you will want to add the blog id to the anchor as well. Instead of ref1, you'll want:
ref_[blogid]_[refid]
JavaScript and CSS are the way to go, if you cannot do this on the server side. The following will do what you want:
<html>
<head>
<style type="text/css">
ref {
display:none;
vertical-align:super;
font-size:small;
}
references {
display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
window.onload = function(){
$("references").append("<ol>");
$("ref").each(function(index) {
$("references").append("<li><a name=\"ref_"+(index+1)+"\">"+$(this).text()+"</a></li>");
$(this).html("["+(index+1)+"]");
$(this).css("display", "inline"); // hides references unless the script runs
});
$("references").append("</ol>");
}
</script>
</head>
<body>
<p>This is a reference.<ref>http://www.google.com</ref></p>
<p>This is a another reference.<ref>http://www.yahoo.com</ref></p>
<references>
</references>
</body>
</html>
CSS is for presentation, and does not provide logic. Javascript is the best answer in this case, because it provides the tools and logic you need to accomplish the task.

Categories