Why this function javascript not alert? - javascript

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

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>

Change HTML Content using jQuery 3, then change it back

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>

Javascript - Share Variables over different <script> tags

I have one test.html file with two <script> tags. I need to share a variable from one to another..
Sample code:
<script type="text/javascript">
var test = false;
function testing() {
test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
The output is always:
I am inside..
failed
I also tried to use the window class but it doesn't matter.. (window.test)
What I have to do to get the 'working' alert?
Thanks if anyone can help me. I saw some similar questions, but the answers wasn't a solution for me.
EDIT:
The original code (simplified):
<head>
...
<script type="text/javascript" src="detectblocker.js"></script>
<!-- GitHub: https://github.com/sitexw/BlockAdBlock/ -->
...
</head>
<body>
<script type="text/javascript">
var blocker = false;
function adBlockDetected() {
blocker = true;
alert('inside');
}
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.onDetected(adBlockDetected);
}
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
</script>
<div class="header">
...
</div>
<div class="content_body">
<div class="requirs">
<ul>
...
<script type="text/javascript">
if (blocker == true) {
document.write("<li>enabled!</li>")
} else {
document.write("<li>disabled!</li>")
}
</script>
...
</ul>
</div>
</div>
...
</body>
The output is an alert() "inside" and the <li> "disabled".. (Blocker is enabled..).
The only difference I can see is on the end of the first <script> tag:
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
So why the snippet is working and my code not? Confusing...
If you do not use var before a variable it becomes a global variable like
test = true;
The variable test will be true during the page and also in your next scripts and functions.
Try this:
<script type="text/javascript">
var test = false;
function testing() {
var test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
There are two ways of doing it.
1) create a hidden element and set your variable from your first script to attribute of that element.
This is your hidden element
<input type="hidden" id="hiddenVar"/>
and can set it in javascript as
document.getElementById("hiddenVar").setAttribute("myAttr",test)
Now you can get it in next script as
document.getElementById("hiddenVar").getAttribute("myAttr")
2) By .data() you can read about it here

How to call java script function using thymeleaf attribute th:href?

I have written like this in my HTML page:
<a th:href="#{javascript:deleteContact('deletemainmenu?id=${var[0]}')}">
</a>
And my script is:
function deleteContact(url)
{
var isOK = confirm("Are you sure to delete?");
if(isOK)
{
go(url);
}
}
It's showing an error:
Could not parse as expression: "#{javascript:deleteContact('deletemainmenu?id=${var[0]}')}"
How can i call javascript using th:href?
<html>
<head>
<script>
function deleteContact(url)
{
var isOK = confirm("Are you sure to delete?");
if(isOK)
{
go(url);
}
}
</script>
</head>
<body>
Test
</body>
</html>
<script type="text/javascript">
function getkey(a)
{
var pms = document.getElementById("textkey").value;
a.href = '/allTransaction' + pms;
}
</script>
<input id="textkey" type="text" name="">
gogogo
I think the solution you wanted is something like that
function myFunction(name,t) {
...
}
<a class="nav-link" th:href="'javascript:myFunction(&quot'+${category}+'&quot,1);'">

Onclick is not working when use that as object

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;

Categories

Resources