Where am I doing wrong?
Why this snippet of javascript code dosen't work?
This must be easy, but I just don't know why, I'm really a newbie at this
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to make a BUTTON element.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var bodyel = document.getElementById("body");
var block = document.createElement("div");
block.innerHTML = "whatever";
bodyel.appendChild(block);
};
</script>
</body>
</html>
Your <body> element does not have an "id" attribute at all, let alone one whose value is "body".
You could do this:
<body id=body>
Or this:
var bodyel = document.getElementsByTagName('body')[0];
Or just:
var bodyel = document.body;
Here is the problem
var bodyel = document.getElementById("body"); //body is not id
You can use
getElementsByTagName('body')[0];
or
var b = document.body;
Change the line:
var bodyel = document.getElementById("body");
To the following
var bodyel = document.body;
The body does not need to be called with a id
and if yes you have to add that id.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to make a BUTTON element.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction() {
var bodyel = document.body;
var block = document.createElement("div");
block.innerHTML = "whatever";
bodyel.appendChild(block)
}
</script>
</body>
</html>
Fiddle
You need to change your code a little:-
var bodyel = document.getElementsByTagName("body")[0];
Rest will work. Have a look at this fiddle. Also try looking into document-body-appendchildi
Related
I need to pass generated Random number from JS function to the html div, but its not able to pass it on,here is my code snippet
<html>
<head>
</head>
<body>
<button id="order" onclick="getRand()">orderId</button>
<div id="order_id"></div>
<script>
var getRand = function () {
var elem = Math.floor(Math.random() * 89999 + 10000);
document.getElementById("order_id").innerHTML = elem.value;
};
</script>
</body>
</html>
Try with this: Working example :
<html>
<body>
<head><h1>CRS</h1></head>
<button id= "order" onclick="getRand()">orderId</button>
<div id="order_id">ff</div>
<script>
var getRand = function() {
var elem = Math.floor(Math.random()*89999+10000);
document.getElementById("order_id").innerHTML = elem;
};
</script>
</body>
</html>
You just change elem.value to elem
Check This Answers it is working good
var getRand = function() {
var elem = Math.floor(Math.random()*89999+10000);
document.getElementById("order_id").innerHTML = elem;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id= "order" onclick="getRand()">orderId</button>
<div id="order_id">ff</div>
I have the following piece of code, which changes one line of text in a click of a button:
<!DOCTYPE html>
<html>
<body>
<h1>Change content exercise</h1>
<p id="demo">Watch this HTML content changes..</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'This is JavaScript!'">
Click Me!</button>
</body>
</html>
This is quite easy since there is no script, no function needed to handle the button. Now, I want this same button to change back to the first content when I click it again. I assume that now I need to have a function, but not sure how to write it. An ideas?
You don't have to use a function. You could do it with a ternary operator ? and :, or you could even just write an if else statement all on one line.
<h1>Change content exercise</h1>
<p id="demo">Watch this HTML content changes..</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML === 'This is JavaScript!' ? document.getElementById('demo').innerHTML = 'Watch this HTML content changes..' : document.getElementById('demo').innerHTML = 'This is JavaScript!';">
Click Me!</button>
However, that is a lot of code to cram into one line and it would be much cleaner in a separate function, as such.
function changeText() {
var demo = document.getElementById('demo');
if (demo.innerHTML === 'This is JavaScript!') {
demo.innerHTML = 'Watch this HTML content changes..';
} else {
demo.innerHTML = 'This is JavaScript!';
}
}
<h1>Change content exercise</h1>
<p id="demo">Watch this HTML content changes..</p>
<button type="button" onclick="changeText()">Click Me!</button>
Well. Although the way you are trying is not the best practice.... But the following way will give you some hope. try to do more research.
function myFunction() {
var x=document.getElementById("demo").innerHTML;
if(x=="A Paragraph."){
document.getElementById("demo").innerHTML="Back Again";}
if(x=="Back Again")
document.getElementById("demo").innerHTML="A Paragraph.";
}
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
More simply, this function works:
<h1>Change content exercise</h1>
<p id="demo">Watch this HTML content changes..</p>
<button type="button" onclick="changeText()">Click Me!</button>
Javascript:
function changeText() {
e = document.getElementById('demo');
e.innerHTML = e.innerHTML == "Watch this HTML content changes.." ? "This is JavaScript!" : "Watch this HTML content changes..";
}
You can see it working at this JS Fiddle: http://jsfiddle.net/0yLb4a3j/
You can have something like a toggle function:
<script type="text/javascript">
function toggleContent() {
var message1 = "This is JavaScript!";
var message2 = "Watch this HTML content changes..";
var element = document.getElementById('demo');
if (element.innerHTML===message1)
element.innerHTML = message2;
else
element.innerHTML = message1;
return false;
}
</script>
You get it called by setting onclick="toggleContent();" on the button.
You could use an IIFE, an array, an incremented counter, and a modulo operator to achieve this.
document.getElementById('button').onclick = (function(){
var demo = document.getElementById('demo');
var text = [demo.textContent,'This is JavaScript!'];
var count = 0;
return function() {
demo.textContent = text[++count % 2];
}
})();
<p id="demo">Watch this HTML content changes..</p>
<button type="button" id="button">Click Me!</button>
var btn = document.getElementById("<btn_id>");
var previous = "";
btn.addEventListener("click", clickHandler);
function clickHandler() {
var demo = document.getElementById("demo");
if (!previous) {
previous = demo.innerHTML;
} else {
demo.innerHTML = "This is JS";
btn.removeEventListener("click", clickHandler);
}
}
first of all , you ll need to do the code in a seperate script, in brief , append the intial text to the div then wheck button clicked, change it to second text, and according to your question you ll need a second button who will change the div text to the intial text , logically that ll give something like tht :
<script>
window.onload = function(){
document.getElementById('demo').innerHTML = 'Watch this HTML content changes..'
}
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = 'This is JavaScript!'
};
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = ''Watch this HTML content changes..'
};
</script>
<!DOCTYPE>
<html>
<script>
var btn = document.createElement("BUTTON");
var txt = document.createTextNode("Text");
btn.appendChild(txt);
document.body.appendChild(btn);
</script>
</html>
I just started learning HTML and JavaScript.
I was expecting the above code to output a button with a word "text" in it.
Unfortunately, the output was blank. Can someone explain to me why this code didn't work?
your script won't do anything because it in head so your script run before body you need use window.onload function like this
<!DOCTYPE>
<html>
<script>
window.onload = function(){
var btn = document.createElement("BUTTON");
var txt = document.createTextNode("Text");
btn.appendChild(txt);
document.body.appendChild(btn);
}
</script>
</html>
jsve is close. You need to make sure the code isloaded when the body loads. This is done by calling the body's onload function, like this...
<!doctype html>
<html>
<head>
<script>
function init(){
var btn = document.createElement("BUTTON");
var txt = document.createTextNode("Text");
btn.appendChild(txt);
document.body.appendChild(btn);
}
</script>
</head>
<body onload="init()"></body>
</html>
You need to run that code after the body is loaded:
<!doctype html>
<html>
<head>
<script>
function addBtn() {
var btn = document.createElement("button");
var txt = document.createTextNode("Text");
btn.appendChild(txt);
document.body.appendChild(btn);
}
</script>
</head>
<body onload="addBtn()"></body>
</html>
A few more comments:
You also need to update your DOCTYPE to <!doctype html> as I show above.
Wrap your <script> tag inside of a <head> tag.
No need to capitalize button.
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 am new to StackExchange. I have very basic question in JavaScript.
I have created simple JavaScript function changing the color of the text using onClick in that same function i want to change the last word
Here is the example
<!doctype html>
<head>
<title>
Sample Javascript
</title>
<script type="text/javascript">
function colorchange(myid)
{
x = document.getElementById('sample_text');
x.style.color = "red";
x.style.fontWeight = "bold";
text = document.getElementById('sample_text1');
}
</script>
</head>
<body>
<div id="sample_text" onClick="colorchange(1)">Welcome to <span onClick="colorchange(2)" id="sample_text1">Mahaweb</span></div>
</body>
</html>
Kindly help me I want to change the span inner content with the same function.
<!doctype html>
<head>
<title>
Sample Javascript
</title>
<script type="text/javascript">
function colorchange()
{
x = document.getElementById('sample_text');
x.style.color = "red";
x.style.fontWeight = "bold";
document.getElementById('sample_text1').innerHTML = "text";
}
</script>
</head>
<body>
<div id="sample_text" onClick="colorchange()">Welcome to <span onClick="colorchange()" id="sample_text1">Mahaweb</span></div>
</body>
</html>
<script type="text/javascript">
function colorchange(myid)
{
x = document.getElementById('sample_text');
x.style.color = "red";
x.style.fontWeight = "bold";
text = document.getElementById('sample_text1');
if(myid==2){
text.innerHTML="YOUR TEXT HERE";
}
}
</script>
If I understand you correctly, you want to change the span's inner text. As you have already selected the span (var text), try:
text.innerHTML="desiredText";
You can achieve this by changing the property "innerHTML" of your text Element.
Something like:
text.innerHTML = "your_change";
But this is pretty basic stuff. Make sure to checkt out some documentations ;)
I believe this is what you are after (I am using jQuery, a javascript library, which makes this sort of thing much easier)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#sample_text').click(function(){
$(this).find('span').css('color', 'red').css('font-weight', 'bold');
});
</script>