I have a a table which has dynamic td's i want to change the weight of letters when clicked. following is my coding but it changes the whole page when clicked. Please tell me where I got it wrong.
function addHandler()
{
var addH=document.getElementsByTagName('td');
for( var i=0;i < addH.length;i++)
{
if(addH[i].addEventListener)
{
addH[i].addEventListener('click',addBold,false);
}
else if(addH[i].attachEvent)
{
addH[i].attachEvent('onclick',addBold);
}
}
}
function addBold()
{
var add=document.getElementsByTagName('td');
for( var i=0;i < add.length;i++)
{
var weightVal=add[i].style.fontWeight;
if(weightVal!=900)
{
add[i].style.fontWeight="900";
}
else
{
add[i].style.fontWeight="100";
}
}
}
Your addBold routine is setting ALL td's. The following works. I wish I could give you a reference link, but I can't. I want that link myself.
[edit] This page works like I think you want it to. Does it work for you?
The "e" gets passed to the event handler. I wish I could say more.
Like I said, I'm looking for a reference on how this works. But it does.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
function addHandler() {
var addH=document.getElementsByTagName('td');
for( var i=0;i < addH.length;i++) {
if(addH[i].addEventListener) {
addH[i].addEventListener('click',addBold,false); }
else if(addH[i].attachEvent) {
addH[i].attachEvent('onclick',addBold); } }
}
function addBold(e) {
if (e.target.style.fontWeight != "900") {
e.target.style.fontWeight = "900"; }
else {
e.target.style.fontWeight = "100"; }
}
</script>
</head>
<body onload="addHandler();">
<div id="bodyid">
<table border="1">
<tr><td>One1</td><td>Two1</td></tr>
<tr><td>One2</td><td>Two2</td></tr>
</table>
</div><!-- bodyid -->
</body>
</html>
Related
I have an unknown symbols displayed in my javascript application for try catch construction using czech language even when I use coding windows-1250. These symbols is displayed like question marks in diamond.
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<title>Konstrukce Try/Catch</title>
<script type="text/javascript" src="number.js"></script>
</head>
<body>
<form name="formular" id="formular" action="#">
<div id="cisloDiv">Zadejte číslo v rozsahu 1 až 100: <input id="cislo" name="cislo"> <span id="informace"> </span></div>
<div><input id="odeslatFormular" type="submit"></div>
</form>
<script type="text/javascript">
function inicializuj() {
document.forms[0].onsubmit = function() { return zkontrolujFormular(this) };
}
window.onload = inicializuj;
</script>
</body>
</html>
javascript
function zkontrolujFormular() {
try {
var cislo = document.forms[0]["cislo"];
if (isNaN(cislo.value)) {
var chyba = new Array("Nejedná se o číslo",cislo);
throw chyba;
}
else if (cislo.value > 100) {
var chyba = new Array("Zadané číslo je větší jak 100",cislo);
throw chyba;
}
else if (cislo.value < 1) {
var chyba = new Array("Zadané číslo je menší jak 1",cislo);
throw chyba;
}
return true;
}
catch(objektVyjimky) {
var informace = document.getElementById("informace");
var textChyby = document.createTextNode(objektVyjimky[0]);
var novySpan = document.createElement("span");
novySpan.appendChild(textChyby);
novySpan.style.color = "#FF0000";
novySpan.style.fontWeight = "bold";
novySpan.setAttribute("id","informace");
var rodic = informace.parentNode;
rodic.replaceChild(novySpan,informace);
objektVyjimky[1].style.background = "#FF0000";
return false;
}
}
Have you tried using UTF-8 encoding?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
or shorter:
<meta charset="utf-8" />
Nowadays using encoding other that UTF-8 is rather rare. You may need it in special circumstances, but whenever you can try to use UTF.
Now I have the solution, something was bad in my code because in solution (it is from learning material) it works.
I'm creating a little script to try and search for an element in the array based on input.
var modulo = document.getElementById("modulo").value;
var link = [
"http://www.forumfree.it/",
"http://www.forumcommunity.net/",
"http://www.blogfree.net/",
];
if(modulo.indexOf(link) > -1) {
alert("Your site is:" + modulo);
}
else {
alert("Sorry, I don't found:" + modulo)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Search element in array</title>
</head>
<body>
<input type="text" id="modulo" class="form">
</body>
</html>
Anyone can explain to me how to do that (if there's another way to do it better, inform me), and why my code doesn't run? Thanks!
Code explanation: I've used var modulo to contain the value of the input. Then I've created a variable to contain the link. Then if-else statement and indexOf to search and find it.
Thanks, the code solution is: https://plnkr.co/edit/bDt4n34KBFAvZrSWmb4a?p=preview
You can try with this plunker https://plnkr.co/edit/bDt4n34KBFAvZrSWmb4a?p=preview it used event trigger to have a button to search website :
<button onclick="myFunction()">Search</button>
and I wrote your code into a function.
I hope this will help you
The final state :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<input type="text" id="modulo" class="form">
<button onclick="myFunction()">Search</button>
</body>
var link = [
"http://www.forumfree.it/",
"http://www.forumcommunity.net/",
"http://www.blogfree.net/",
];
function myFunction() {
var input = document.getElementById("modulo");
var results = [];
for(var i = 0; i < link.length; i++) {
if(link[i].indexOf(input.value) > -1) {
results.push(link[i]);
}
}
if(results.length == 1) {
alert("Your site is:" + results[0]);
}
else if (results.length > 1){
alert("Sorry, your search return more than one result:" + results)
}
else {
alert("Sorry, I don't found:" + input.value)
}
}
You have
if(modulo.indexOf(link) > -1)
but I think that it should be
if(link.indexOf(modulo) > -1)
Assuming that modulo is a single string element, this will search the link array for that element and return the index of that element.
I think you were on the right track. You just need a few things:
a button to initiate the search
put your code in a function so you can call it
you want to search the array link for the value of the input modulo
function findIt() {
var modulo = document.getElementById("modulo").value;
var link = [
"http://www.forumfree.it/",
"http://www.forumcommunity.net/",
"http://www.blogfree.net/",
];
if (link.indexOf(modulo) > -1) {
alert("Your site is:" + modulo);
} else {
alert("Sorry, I don't found:" + modulo)
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Search element in array</title>
</head>
<body>
<input type="text" id="modulo" class="form">
<input type="button" onclick="findIt()" value="find it">
</body>
</html>
function runscript() {
var modulo = document.getElementById("modulo").value;
var link = [
"http://www.forumfree.it/",
"http://www.forumcommunity.net/",
"http://www.blogfree.net/",
];
var found = false;
for(var i = 0; i < link.length; i++) {
if (link[i].indexOf(modulo) > -1) {
alert("Your site is:" + link[i]);
found = true;
}
}
if (!found) {
alert("Sorry, I don't found:" + modulo)
}
}
And the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Search element in array</title>
</head>
<body>
<input type="text" id="modulo" class="form">
<input type="button" onclick="runscript()" value="search" />
</body>
</html>
You will need to press button for search
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function abc()
{
ansArray = ['a'];
document.write('<input type = "button" value = "a">');
document.write('<input type = "button" value = "b">');
var myButton = document.getElementsByTagName("input");
myButton[0].onclick = function() {
if(ansArray[0] == 'a')
myButton[0].style.backgroundColor = "green";
else
myButton[0].style.backgroundColor = "red";
}
myButton[1].onclick = function() {
if(ansArray[0] == 'b')
myButton[1].style.backgroundColor = "green";
else
myButton[1].style.backgroundColor = "red";
}
}
</script>
</head>
<body onload="abc()">
</body>
</html>
This code segment is to change the colour of the two buttons on click event,works fine in chrome and firefox but the onclick functions does not work in IE9. Please help... Thanks in advance
Try calling the function like
(function abc(){
// code here
})();
Also use ; after each function expression, i.e. myButton[0].onclick = function() {...};.
Working here.
I'm trying to make jQuery take JSON file and put the data from it on a simple site, when a button is pressed.
So, the JSON code looks like this:
{
"images" : [
{ "source" = "images1", "alternative" = "altImg1" },
{ "source" = "images2", "alternative" = "altImg2" },
{ "source" = "images3", "alternative" = "altImg3" }
]
}
And the HTML + jQuery:
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button>Press Me!</button>
<script>
$('button').click(function() {
$.getJSON('json-db.html', function(data) {
for(var i = 0; i < data.images.length; i++) {
var image = data.images[i];
$('#result').append('<h1>' + image.source + ' ' + image.alternative + '</h1>');
}
});
});
</script>
<div id="result">Result</div>
</body>
</html>
There are no errors detected by Firebug. I rewrote the code several times, looked for mistakes, compared it to a similar code and so on, but couldn't find anything.
Thanks in advance!
your json notation is wrong
use : instead of = like:
..........
"images" : [
{ "source" : "images1", "alternative" : "altImg1" },
....................
]
..........
<!--
Copyright (c) 2008 Google Inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</style>
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script>
<script type="text/javascript">
google.load('search', '1');
onload = function() {
google.search.Search.getBranding('branding');
//google branding
var searchResultsContainer = document.getElementById('searchResults');
var newsSearch = new google.search.NewsSearch();
newsSearch.setSearchCompleteCallback(this, function() {
if (newsSearch.results && newsSearch.results.length > 0) {
searchResultsContainer.style.display = 'block';
for (var i=0; i<newsSearch.results.length; i++) {
var wrapper = document.createElement('div');
var node = newsSearch.results[i].html.cloneNode(true);
wrapper.className = 'gs-result';
wrapper.appendChild(node);
searchResultsContainer.appendChild(wrapper);
}
}
},null);
newsSearch.execute("sport");
//keyword
}
</script>
</head>
<body>
<div>
<div id="branding" style="float:left;"></div>
<div id="searchResults"></div>
</div>
</body>
</html>
Hi, I want to make a Google news search, the above code runs well. However, I want to separate a js function. I use the following code, but the result shows nothing. How to modify it correctly?
<!--
Copyright (c) 2008 Google Inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</style>
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script>
<script type="text/javascript">
google.load('search', '1');
function searchcomplete() {
var newsSearch = new google.search.NewsSearch();
if (newsSearch.results && newsSearch.results.length > 0) {
searchResultsContainer.style.display = 'block';
for (var i=0; i<newsSearch.results.length; i++) {
var wrapper = document.createElement('div');
var node = newsSearch.results[i].html.cloneNode(true);
wrapper.className = 'gs-result';
wrapper.appendChild(node);
searchResultsContainer.appendChild(wrapper);
}
}
}
onload = function() {
google.search.Search.getBranding('branding');
//google branding
var searchResultsContainer = document.getElementById('searchResults');
var newsSearch1 = new google.search.NewsSearch();
newsSearch1.setSearchCompleteCallback(this, searchcomplete ,null);
newsSearch1.execute("sport");
//keyword
}
</script>
</head>
<body>
<div>
<div id="branding" style="float:left;"></div>
<div id="searchResults"></div>
</div>
</body>
</html>
A couple of problems here:
function searchcomplete() {
// you create a... uh new empty search here?
var newsSearch = new google.search.NewsSearch();
...
// searchResultsContainer is NOT defined in this scope
searchResultsContainer.style.display = 'block';
...
}
onload = function() {
// this defines searchResultsContainer in the scope of the onload callback,
// but NOT in the global scope
var searchResultsContainer = document.getElementById('searchResults');
...
// the first param is the thing that 'this' in the callback will refer to
// in this case it's the window but you need to change this in order
//to get access to the results
newsSearch1.setSearchCompleteCallback(this, searchcomplete ,null);
...
}
And here's a fixed version:
function searchcomplete() {
// Huh, why this? See below...
if (this.results && this.results.length > 0) {
// get 'searchResultsContainer' here
var searchResultsContainer = document.getElementById('searchResults');
searchResultsContainer.style.display = 'block';
for (var i=0; i < this.results.length; i++) {
var wrapper = document.createElement('div');
....
}
window.onload = function() {
...
// here we supply newsSearch itself as the 'this' so we can access
// its properties inside the callback
newsSearch.setSearchCompleteCallback(newsSearch, searchcomplete ,null);
...
}
You should read up a bit on this and scoping.
I don't know why you tried to do it in this way, but it's the working code:
...
<script type="text/javascript">
google.load('search', '1');
var newsSearch, searchResultsContainer;
function searchcomplete() {
// var newsSearch = new google.search.NewsSearch();
if (newsSearch.results && newsSearch.results.length > 0) {
searchResultsContainer.style.display = 'block';
for (var i=0; i<newsSearch.results.length; i++) {
var wrapper = document.createElement('div');
var node = newsSearch.results[i].html.cloneNode(true);
wrapper.className = 'gs-result';
wrapper.appendChild(node);
searchResultsContainer.appendChild(wrapper);
}
}
}
onload = function() {
google.search.Search.getBranding('branding');
//google branding
searchResultsContainer = document.getElementById('searchResults');
newsSearch = new google.search.NewsSearch();
newsSearch.setSearchCompleteCallback(this, searchcomplete ,null);
newsSearch.execute("sport");
//keyword
}
</script>
...
you don't have to define new variable newsSearch
you should define newsSearch and searchResultsContainer globally.
Happy coding :-)