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>
Related
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.
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>
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
});
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>
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>