helo here is a code:
<a id="sdffg" href="/allgemeinen/me-libe-love-y/"><p class="erfg" class="quotes">
bla bla bla
</p></a>
i want to delete a element
js code for it:
<script>
window.onload=function(){
var btn = document.getElementById('sdffg');
btn.onclick = function () {
document.getElementById('txt').remove();
this.remove();
};
}
</script>
but it is not working, page:
https://geburtstagsplanet.com/allgemeinen/me-libe-love-y/
my js code is really in source code but it is not working:
view-source:https://geburtstagsplanet.com/allgemeinen/me-libe-love-y/
You can already put onclick directly on your a tag like this:
<a id="sdffg" href="/allgemeinen/me-libe-love-y/" onclick="this.remove()">
Also based on your question you wanted to delete the element on onload then it must be:
Javascript:
window.onload=function(){
var elem = document.getElementById("sdffg");
elem.parentNode.removeChild(elem);
}
you can also use jQuery:
$(document).ready(function(){
$("#sdffg").remove();
});
Problem: #txt doesn't exits in the DOM,
Best guess is you want to delete #sdffg from the dom
window.onload=function(){
var btn = document.getElementById('sdffg');
btn.onclick = function (e) {
e.preventDefault();
document.body.removeChild(this);
};
This should help.
<script>
window.onload=function(){
const element = document.getElementById("elementor-icons-fa-solid-css");
element.remove();
}
</script>
Related
I’ve this script. It works fine in this situation, but it seems to conflict with other scripts in the site I'm working on. How can I rewrite it that it doesn't need jQuery / OnLoad?
This is what it does: the button opens a random link from an array in a new window everytime you click on it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<title>TestBase</title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
$("#rnd_link").click(function(){
window.open(links[Math.floor((Math.random()*3))]);
});
});//]]>
</script>
</head>
<body>
<button id="rnd_link">Random</button>
</body>
</html>
window.onload = function(){
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
var btn = document.getElementById('rnd_link');
btn.onclick = function(){
window.open(links[Math.floor((Math.random()*3))]);
}
}//]]>
Should work.
This works:
<script type='text/javascript'>
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
window.addEventListener('load', function() {
document.getElementById("rnd_link").onclick = function() {
window.open(links[Math.floor((Math.random()*3))]);
};
});
</script>
If you just want to avoid using jQuery, I suggest using window.onload to trigger the function when the page loads.
window.onload = function(){
// do stuff
};
Then in order to select a DOM element, you'll use the getElementById() method, then you'll add an event listener for a mouseclick:
document.getElementById("rnd_link").addEventListener("click", function(){
// do stuff
});
Here's the MDN entry for event listeners for further reading: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
I'd suggest this:
Call the function when the button is clicked.
<button id="rnd_link" onclick="random()"></button>
<script>
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
function random(){
window.open(links[Math.floor((Math.random()*3))]);
}
</script>
More info for onclick here
I am trying to write a javascript function that would call on button click but through a div class id. How to write that?
<body>
<div class="content">
<button>Click me</button>
</div>
</body>
after click it should write message I am here.
This is really simple. just you will have to call click function with div class.
like this
$('.content').click(function(){
alert("You have done");
})
Here is DEMO
Javascript solution for the html provided:
document.getElementsByClassName('content')[0].onclick = function () {alert("I am here");};
Javascript for any button in the div:
message = function () {
alert("I am here");
};
var items = document.getElementsByClassName('content')[0].children;
for (var i in items) {
if (items[i].tagName == "BUTTON") {
items[i].onclick = message;
}
}
$(function(){
$(".content").find("button").on("click",function(){
alert("I am here");
});
});
Today i was writing some basic stuff of java script mean while i encountered the problem. Although i was able to sort out the problem but could not find the reason of why this were not working. Here is my code
$('document').ready(function() {
$(this).click(function() {
var node1 = $(this);
a = node1.text();
console.log(a);
});
});
In this in the console i see empty string. But if i change the $(this).click(function{...}) to $('.some_class_name').click(function{.....}); than my code works fine and display the text value of the button i clicked.
I want to know what is wrong in the above code.
You must be looking for this, Use the e.target to get the text inside of the clicked element which is present inside the document.
$('document').ready(function () {
$(this).click(function (e) {
var node1 = $(e.target);
var a = node1.text();
console.log(a);
});
});
Try this code
Just change the this keyword to body
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
$('document').ready(function(){
$('body').click(function(){
var node1 = $(this);
a = node1.text();
console.log(a);
});
});
</script>
<body>
Test
</body>
I have an HTML anchor tag like
<a href="anchorid" onclick="callEvent(1)">
Here I call the Javascript function like
<script>
function callEvent(anchor) {
alert("Anchor ID is - "+anchor);
document.getElementById("anchorid").onClick = function () { callEvent(0) }; // BY using this code, update the onclick callEvent(0), like toggle
}
</script>
I wants to update the anchor tag like
<a href="anchorid" onclick="callEvent(0)">
When using this code, it is not updating as per my requirement.
document.getElementById("anchorid").onClick = function () { callEvent(0) };
How do I get it to update?
for using document.getElementById("anchorid").. you need to have id in your element, which you currently dont have, try doing:
//add id to your anchor
<a href="javascript:void(0);" id="anchorid" onclick="return callEvent(1);">
test
</a>
and js
<script type="text/javascript">
function callEvent(num) {
alert("Anchor ID is - "+num);
document.getElementById('anchorid').onclick = function () { callEvent(0) };
}
</script>
Store the toggle value in tag itself and then use.
<script>
function callEvent(val) {
var val = document.getElementById("myId").getAttribute('data-val');
alert(val);
// toggle value
val = val==1?0:1;
document.getElementById("myId").setAttribute('data-val',val);
}
</script>
<a id="myId" data-val="0" onClick="callEvent()">Click</a>
here value is stored in data-val value so that is toggled in the callEvent function itself, so no need to rebind the event.
See Example fiddle
try:
document.getElementById("anchorid").onclick
Better:
document.getElementById("anchorid").addEvenetListener('click', function(){
});
Tested: http://jsfiddle.net/Yca5W/
document.getElementById("anchorid").onclick =
function () {
alert("clicked");
};
if you only change parameter of calling function then you dont have to change complete event. You can do it like this:
HTML
<a id="anchorid" href="#">click me !</a>
JS
<script>
var anchor = 1;
document.getElementById("anchorid").onclick = function(){
alert("Anchor ID is: " + anchor);
anchor = anchor == 1 ? 0 : 1; //toggle 0 and 1
}
<script>
try This:
var anchor= document.getElementById('anchorid');
anchor.addEventListener('click', function() {
callEvent(0);
});
OR
$( "#anchorid" ).click(function() {
callEvent(0);
});
if you only want changes passing parameter from 1 to 0 or vice verse then do this one:
<input type="hidden" name="para" id="para" value="1" >
<a href="anchorid" onclick="callEvent($('#para').val())">
$( "#anchorid" ).click(function() {
if ($('#para').val()==1) {
$('#para').val(0)
} else {
$('#para').val(1)
}
});
try this, it may solve your problem demo Fiddle
Add id="anchorid" to your anchor tag
When you click it next time it will callEvent by argument 0,
function callEvent(anchor) {
alert("Anchor ID is - "+anchor);
var ele = document.getElementById("anchorid");
ele.setAttribute("onclick","callEvent(0)");
}
It will update your link like you wanted
<a href="anchorid" id="anchorid" onclick="callEvent(0)">
i have this simple code i just can't get it working.
<html>
<head>
<script type="text/javascript">
window.onload = function () {
p = document.getElementById("foo");
p.click = function() { alert(p); };
}
</script>
</head>
<body>
<div id="foo" style="position:relative;width:100px;height:100px;background-color:red;"> </div>
</body>
</html>
Javascript is turned on. If i put () after the function i can get it autorun. But still, the onclick is not working after it. Firebug did not show any errors.
I think you need to add an event-handler/listener for the 'click' event, rather than just specifying 'p.click = ...'
You could try this:
function whenLoaded() {
var p = document.getElementById("foo");
p.addEventListener("click", function(){alert(p)}, false);
}
document.addEventListener("DOMContentLoaded", whenLoaded, false);
*Note: attaching event listeners varies by browser, so youll want to use a library that abstracts the differences... Jquery can do this, and Bean ( https://github.com/fat/bean) is built for this. You could also check out Dustin Diaz's domReady if you're just looking for a small cross-browser DOM-loaded event handler kind of thang -- https://github.com/ded/domready
Please update as follow. Try.
p.onclick = function() { alert(p); };
p.onclick = function() { alert(p); };
and... remember to use var when you create a new var
var p = document.getElementById("foo");
If you're using jQuery, try this:
$(document).ready(function() {
p = document.getElementById("foo");
$(p).click(function(){
alert(p);
});
});