Change HTML Content using jQuery 3, then change it back - javascript

Basically, what I want to do:
When you press the button #change, the content in the div #board has to change to nothing but:
<h2>Hi!</h2>
<button type="button" onclick="ChangeAgain();">
Then when you click that button, it has to change back to what it used to be, that is:
<h2>Welcome to this page.</h2>
<p>It's quite boring in here. Why don't you click the button?</p>
<button onClick="Change();">Button for you to Click</button>
Here's my JavaScript (jQuery 3.2.1), which is not working.
$(function () {
var inThere = "";
function Change() {
inThere += $("#board").html();
$("#board").html("<h2>Hi!</h2> \n
<button type=\"button\" onclick=\"ChangeAgain();\">")
}
function ChangeAgain () {
$("#board").html(inThere);
}
})

Don't define the function in the document ready handler scope. You must be getting error like
"Uncaught ReferenceError: Change is not defined",
var inThere = "";
function Change() {
inThere += $("#board").html();
$("#board").html("<h2>Hi!</h2> \n <button type = \"button\" onclick=\"ChangeAgain();\">Button for you to Click</button>")
}
function ChangeAgain() {
$("#board").html(inThere);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="board">
<h2>Welcome to this page.</h2>
<p>It's quite boring in here. Why don't you click the button?</p>
<button onClick="Change();">Button for you to Click</button>
</div>

Your functions are not available in the global namespace, which is considered a good practice. But due to this you should not call a function from your HTML, but listen to the click event of your button in your code:
$(function() {
var inThere = "";
var changed = false;
var $board = $("#board");
$board.on("click", "button", function() {
if (changed) {
$board.html(inThere);
} else {
inThere = $board.html();
$board.html("<h2>Hi!</h2><button>Button for you to Click</button>");
}
changed = !changed;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="board">
<h2>Welcome to this page.</h2>
<p>It's quite boring in here. Why don't you click the button?</p>
<button>Button for you to Click</button>
</div>

Related

How do I properly set link variables in javascript?

I have 4 buttons which create a text output, so that a "Go" button goes to the link given in that text output.
I'm still a javascript noob and am thinking in other languages, but is there a way to make .innertext into a variable based on last button pressed? This is the best logic I've come up with, and would like to make it more efficient code.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<h1 id="changedText">Button changes this text</h1>
<button onclick="btn1()">Button1</button>
<button onclick="btn2()">Button2</button>
<button onclick="btn3()">Button3</button>
<button onclick="btn4()">Button4</button>
<br>
<button onclick="Go()">Go to Link Above</button>
<script>
function btn1() {
document.getElementById("changedText").innerText = "http://www.test-
button-1.com";
}
function btn2() {
document.getElementById("changedText").innerText = "http://www.test-
button-2.com";
}
function btn3() {
document.getElementById("changedText").innerText = "http://www.test-
button-3.com";
}
function btn4() {
document.getElementById("changedText").innerText = "http://www.test-
button-4.com";
}
</script>
As you can see my code is really dirty, and doesn't "Go" to the link, what am I missing?
Just single click handle that.No need to define 4 function.
$("button").on("click", function() {
var siteId = $(this).text().slice(-1);
var url = "http://www.test-button-#.com";
if (!isNaN(siteId)) {
url = url.replace(/#/gi, siteId);
$(this).text(url);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
I think you can try using input tag and whenever click on a button, you assign the value properties to a global variable.
Then, "Go" function will change your text as:
function Go(){
document.getElementById("changedText").innerText = `http://www.test-${globalVariable}.com`;
}
$("button").on("click", function() {
var url = $(this).data("url");
$("#changedText").text(url);
$("#goButton").data("url", url)
});
$("#goButton").click(function() {
window.location.href = $(this).data("url");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="changedText">Button changes this text</h1>
<button data-url="http://www.test-button-1.com">Button1</button>
<button data-url="http://www.test-button-2.com">Button2</button>
<button data-url="http://www.test-button-3.com">Button3</button>
<button data-url="http://www.test-button-4.com">Button4</button>
<button id="goButton">Go to Link Above</button>
function setLink(link) {
document.getElementById("changedText").innerText = link;
}
function Go() {
document.location.href = document.getElementById("changedText").innerText;
}
<h1 id="changedText">Button changes this text</h1>
<button onclick="setLink('http://www.test-button-1.com')">Button1</button>
<button onclick="setLink('http://www.test-button-2.com')">Button2</button>
<button onclick="setLink('http://www.test-button-3.com')">Button3</button>
<button onclick="setLink('http://www.test-button-4.com')">Button4</button>
<br>
<button onclick="Go()">Go to Link Above</button>

JavaScript- count how many times button is cliked

I want to count how many times only 1 specified button is clicked.
In my code I have 8 buttons and in p element is shown the number every time I click any other button.
http://prntscr.com/jg26mk
Can you please help me with this?
You can assign an ID to the specified button, then in jQuery use $('#id') instead of $('button')
May be this is what you are looking for.
var count=0;
$(".mySpecialButtons").click(function (){ count++; });
// call this function to show click counts!
function showClicks(){
alert(count);
}
Easiest way:
<button onclick="myFunction()">Click</button>
<p id="demo"></p>
<script>
var count = 0;
function myFunction() {
document.getElementById("demo").innerHTML = count++;
}
</script>
Example
You can iterate each button, create counter variable that can only be accessible by the button and increment it on click.
$('button').each( function(){
var counter = 0;
$( this ).click( function(){
counter++;
alert( this.innerText + ' has been clicked ' + counter + ' times' );
} );
} )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button A</button>
<button>Button B</button>
<button>Button C</button>
Give your special button an id and use it on click event. Like this:
var count = 0;
$("button#special").on('click', function() {
count ++;
$("p").text(count);
});
$("p").text(count);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Send</button>
<button id="special">Click Me to count</button>
<br />
<button>Send</button>
<button>Click</button>
<br />
<button>Send</button>
<button>Click</button>
<br />
<button>Send</button>
<button>Click</button>
<br />
<p></p>
try this
<button type="button" id="SomeID">Countable button</button>
<button type="button" >Unountable button</button>
<button type="button" >Unountable button</button>
<script>
var count = 0;
$('body').on('click', '#SomeID', function () {
count++;
$("p").text("Number of Count is " + count)
});
</script>
A closure should do the trick, as described in this article. So, there is no need to define a global variable to count clicks and pollute the global namespace.
element.onclick = (function outer() {
let counter = 0;
return function inner() {
counter++;
console.log('ID:' + element.id + 'Number of clicks: ' + counter);
};
})();
The counter variable will be unique for every button, so you will have information for each button how many times it was clicked.

Why this function javascript not alert?

Why this function javascript not alert ?
First , Click CLICK 1 it's will show delete and then click delete
Why not alert 111-aaaa How can i do that?
https://jsfiddle.net/tdpusq05/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div onclick="test_fn1()">CLICK 1</div>
<div id="demo"></div>
<script>
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick='delete_fn('111-aaaa')'>delete</span>";
};
</script>
<script>
function delete_fn(no_delete)
{
alert(no_delete);
};
</script>
Remove single quotes from onclick around delete_fn('111-aaaa') like following
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick=delete_fn('111-aaaa')>delete</span>";
};
<html>
<head>
</head>
<body>
<div onclick="test_fn1()">CLICK 1</div>
<div id="demo"></div>
<script>
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick='delete_fn(\"111-aaaa\")'>delete</span>";
}
</script>
<script>
function delete_fn(no_delete) {
alert(no_delete);
};
</script>
</body>
</html>
change the test_fn1 method to escape the quotes, here is the fiddle
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick=\"delete_fn('111-aaaa')\">delete</span>";
}
function delete_fn(no_delete)
{
alert(no_delete);
}
JS will not catch dynamically created elements by using onclick function.
you have to do event delegation (if you are using jQuery) :-
$('#id').on('click', 'yourSelector', function() {
//do something
});

How to change HTML content multiple times with one button using JS (no JQuery)?

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>

Changing text by calling javascript

im trying to change a line of text if a link is clicked, however it doesnt seem to be calling my script to change it.
<script >
var paragraphToChange = document.getElementById("q1");
paragraphToChange.innerHTML ="Quotation is by:" + Antole France
</script>
<div id="body">
<p>javascript.html - JavaScript page</p>
<a href id="q1">Quotaion is by:</a>
</div>
What you're trying to accomplish is probably something like this:
HTML
<div id="q1">
<a onClick="javascript:clickFunction()">Quotation is by</a>
</div>
JavaScript
clickFunction = function() {
document.getElementById("q1").innerHTML = "<a href='http://www.quotationspage.com/quote/1463.html'>Antole France</a>";
}
JSFiddle
Sir you have to set the value of "newValue" to the quotation.
var newValue = '"Quotation is by:" + Antole France'
paragraphToChange.innerHTML = newValue;
You are missing the click event on the Html tag. Hence, this paragraphToChange.innerHTML ="Quotation is by:" + Antole France"
never gets call.
Why don't you start with this example first:
<p id="display"></p>
<button onclick="displayBob">Bob</button>
<button onclick="displayTom">Tom</button>
<script>
displayBob = function ()
{
document.getElementById("display").innerHTML = "Hello Bob";
}
displayTom = function ()
{
document.getElementById("display").innerHTML = "Hello Tom";
}
</script>

Categories

Resources