I've written this sample code to print the length of x. But for some reason, I am not getting anything! Help!
<html>
<head>
<script type = "text/javascript">
function myF()
{
var x = [1,2,3,4];
var y = document.getElementById("thing");
y.innerHtml = x.length;
}
</script>
</head>
<body onload = "myF();" >
<div id = "thing" >
PRINT TEST
</div>
</body>
</html>
The property name is innerHTML rather than innerHtml.
Related
I'm a rookie. I try this example to test code that when click on each p ,the section text will replace by "yeah"
When click first p, first section is replaced
When click 2nd p, 2nd section is replaced ...
Code like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>p{text-align: center;}</style>
</head>
<body>
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
<script>
var x = document.getElementsByClassName("test")
var y = document.getElementsByTagName("section")
for(i=0;i<y.length;i++){
y[i].setAttribute("class","linktest")
}
var z = document.getElementsByClassName("linktest")
function place(a){
z[a-1].innerHTML="yeah"
}
for(i=0;i<x.length;i++){
x[i].addEventListener("click", function(){
place(i+1)})
}
</script>
</body>
</html>
how i wrong with for loop code of addEventListener
I try to write long code like this
x[0].addEventListener("click",function(){place(1)})
x[1].addEventListener("click",function(){place(2)})
x[2].addEventListener("click",function(){place(3)})
x[3].addEventListener("click",function(){place(4)})
x[4].addEventListener("click",function(){place(5)})
x[5].addEventListener("click",function(){place(6)})
And it worked but i want to short code because real work has mor than 100 items
Help plz
#Chaska's answer works fine but since you mentioned that there will be over 100 items it's important to avoid adding event listeners for each element for better performance. Instead wrap all the p tags in a div and add a single event listener to the div tag. Here is a slightly modified code.
var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
//assuming equal no. of elements in x and y
y[i].setAttribute("class", "linktest");
x[i].setAttribute('data-index', i);
}
var z = document.getElementsByClassName("linktest");
function place(a) {
z[a].innerHTML = "yeah";
}
var testGroup = document.getElementById('test-group');
testGroup.addEventListener('click', function() {
place(parseInt(event.target.getAttribute('data-index')));
})
<div id="test-group">
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
</div>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
You are calling place() function out of the for loop. So the value of i will always be 6.
Try this way to assign the index to each element first and pass it to the place() function.
var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
y[i].setAttribute("class", "linktest");
}
var z = document.getElementsByClassName("linktest");
function place(a) {
z[a].innerHTML = "yeah";
}
for (i = 0; i < x.length; i++) {
x[i].setAttribute('data-index', i);
x[i].addEventListener("click", function() {
place(parseInt(this.getAttribute('data-index')));
})
}
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
I am trying to get "src" value of the image tag and displaying in an alert box.
Alert box message says: "undefined." It works if the script is contained in one block. But fetching a value from outside a script block from another or from an external JavaScript file, loses the saved value.
<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
<script type="text/javascript">
var y = document.getElementById('content');
var z = y.src;
</script>
</head>
<body>
<img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
<script>
alert(z); // undefined?
</script>
</body>
</html>
Because when this line var y = document.getElementById('content'); executed, the element img is not ready, therefore y is null and y.src is undefined, if you change to var z = "test", then you could see that alert show correct :
<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
<script type="text/javascript">
//var y = document.getElementById('content');
var z = "test";
</script>
</head>
<body>
<img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
<script>
alert(z); // undefined?
</script>
</body>
</html>
So, how to fix it ? you could put the line var y = document.getElementById('content'); in the script block after the img element is declared:
<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
</head>
<body>
<img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
<script>
var y = document.getElementById('content');
var z = y.src;
</script>
</body>
<script>
var y = document.getElementById('content');
var z = y.src;
alert(z); // undefined?
</script>
</html>
as the title said and i'm learning javascript and still a beginner.
This the Html file here :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementsByClassName("menu").innerText = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>
Since you are running Jquery you can use Jquery method. like text() or html()
But your problem, is that document.getElementsByClassName("menu") return an HTML Collection so you have to do : document.getElementsByClassName("menu")[0].innerHTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
$(".menu").text(clr({a:"a", b:"b", c:"c"}));
</script>
</body>
</html>
document.getElementsByClassName("menu") will return an Array-like NodeList of elements that contain the class menu.
Since its an Array-like object, you need to access individual elements using [].
In your case, it will be a an array of 1 element, the h1 element, so to access it you need to grab it at position 0:
document.getElementsByClassName("menu")[0].innerHTML = clr({a:"a", b:"b", c:"c"});
----------------------------------------^
I edited a couple a things. You were close.
I gave the h1 an id. And used document.getElementById.
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 id="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementById("menu").innerHTML = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>
This is works fine when i am using addEventListener. But, it is not working when i use button.click . what is the mistake on the below code? what is the cause it is not working on varNext.click= myFunc;?
[code]
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function myFunc(){
var var1 = document.getElementById("slideimage");
var var2 = var1.name.split("_");
//alert(var2);
index = var2[1];
if(index == images.length - 1){
index = 0;
}else {index++;}
var1.name = "image_" + index;
var1.src = images[index];
}
</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
var varNext = document.getElementById("nextbtn");
//varNext.addEventListener("click", myFunc, false);
varNext.click= myFunc;
</script>
</body>
</html>
[/code]
Rather than .clickfires the element's click event it must be .onclickproperty returns the onClick event handler
Try this
varNext.onclick = myFunc;
Demo Fiddle of your code
You need to use the onclick attribute
varNext.onclick = myFunc;
I'm really newbie at Web Development and I'm trying to change the text of some inputs, with Javascript. Here is a example of what my code have to do
<!DOCTYPE html>
<html>
<body>
<p>Click the button to replace "R$" with "" in the field below:</p>
<input id="demo" value="R$ 1223,43"></input>
<input id="demo1" value="R$ 134523,67"></input>
<input id="demo2" value="R$ 12453,41"></input>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x=document.getElementByTagName("input")
for(var i = 0; i < x.length; i++) {
var str=x[i].innerHTML;
var n=str.replace(",",".");
var n1 = n.replace("R$ ","");
document.getElementById("demo").innerHTML=n1;
}
}
</script>
</body>
</html>
So, I want to withdraw the "R$" and replace "," to "." for some math operations. And I have to do this with all inputs in my code.
You were nearly there, replacing a few things to make it look similar to this:
function myFunction() {
var x = document.getElementsByTagName("input"); // ; was missing and you used getElementByTagName instead of getElementsByTagName
for (var i = 0; i < x.length; i++) {
var str = x[i].value; // use .value
var n = str.replace(",", ".");
var n1 = n.replace("R$ ", "");
//document.getElementById("demo").innerHTML=n1; // use x[i] again instead
x[i].value = n1; // and again use .value
}
}
DEMO - Running updated code
These are the needed steps - at least step 1 through 3
moved the script to the head where it belongs
changed getElementByTagName to getElementsByTagName, plural
get and change x[i].value
chained the replace
DEMO
<!DOCTYPE html>
<html>
<head>
<title>Replace example</title>
<script>
function myFunction() {
var x=document.getElementsByTagName("input"); // plural
for(var i = 0; i < x.length; i++) {
var str=x[i].value;
x[i].value=str.replace(",",".").replace("R$ ","");
}
}
</script>
</head>
<body>
<p>Click the button to replace "R$" with "" in the field below:</p>
<input id="demo" value="R$ 1223,43"></input>
<input id="demo1" value="R$ 134523,67"></input>
<input id="demo2" value="R$ 12453,41"></input>
<button onclick="myFunction()">Try it</button>
</body>
</html>
First of all, use .value instead of .innerHTML. .innerHTML referes to text within the opening and closing of the tag.
Secondly, correct the spellings at var x=document.getElementByTagName("input")
it should be getElementsByTagName
this function should do what you want:
function myFunction()
{
var eles=document.getElementsByTagName("input");
for(var i = 0; i < eles.length; i++)
{
if(eles[i].type != 'text') continue; // inputs that aren't of type text dont make sense here
var str = eles[i].value;
str=str.replace(",",".");
str=str.replace("R$ ","");
eles[i].value=str;
}
}