my page is full of php-generated content split in div's that have the same class but no id's. I want to show some buttons that allow me to manage, change and delete the div's; the buttons should be able to change the class, delete the div and select the content of the div.
How can I do this? is there a way to set the button's onclick action to something, say ... onclick="changetheclass(this)" that would actually change the class of the div containing this button?
Man I feel I'm not making any sense here :(
Did anyone understand what I'm talking about? If so, is there any possibility to do this?
Thanks in advance!
:)
EDIT: this is one of the divs, so that you could understand what I'm talking about:
<div class="box"><p>
this is the content of the div
<button onclick="change_the_class(this_div_or_something)">click here to change the class of the div</a>
<button onclick="select_the_content(this_div_or_something)">click here to change the class of the div</a>
<button onclick="delete_the_whole_div(this_div_or_something)">click here to change the class of the div</a>
</p></div>
Is this what you looking for ??
<html>
<head>
<script type="text/javascript">
function changeClass(elm) {
elm.parentNode.className ='newcss';
}
function deleteDiv(elm) {
var par = elm.parentNode;
var gran = par.parentNode;
gran.removeChild(par);
}
</script>
</head>
<body>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
</body>
</html>
in JS, you can use querySelectorAll:
//get all divs with class "myDiv"
var divs = document.querySelectorAll('div.myDiv');
//for each of the gathered divs, do something with it
for(var i=0; i< divs.length;i++){
var aDiv = divs[i];
//"aDiv" is a div in the collection of matched divs
//you can do anything with it: add buttons etc.
}
First stay away from onclick="something" - inline JavaScript. then yes you can still manage to do what you want to do without ids.
var divs = document.getElementsByTagName('div'),
result = [],
len = divs.length,
i = 0,
aLink;
for(; i < len; i++){
// update the condition if there can be more than one class name as this assume a single class name
if (divs[i].className == 'myClassName') result.push(divs[i]);
}
len = result.length;
i = 0;
for (; i < len; i++) {
aLink = document.createElement('a');
aLink.innerHTML = 'Edit';
aLink._parent = result[i]; // store a reference to the parent div
aLink.href = '#';
aLink.onclick = function(ev) {
ev.preventDefault();
// do your edit stuff here, ev.target._parent contain the targetted div
};
result[i].appendChild(aLink);
}
$('div.my-class').each( function( index, element ){
var div = $( element ); // not sure if this is needed
// add the buttons, e.g. via div.html('');
// add the buttons' click handlers
});
Related
I got a problem with one of the sites with JavaScript, and I need to automate a click and then find out how many turns I got before I run out of them. As in, for example, let's say I have 8 turns. So what I would need is to automatically have JavaScript to trigger said div id, 8 times. (As in, I add like this)
Link:https://jsfiddle.net/yxsgp8tc/
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<label><input type="text"/>00-99</label>
<button>
trigger it
</button>
</form>
</body>
in plain javascript, you would target unique elements (using an id) by using document.getElementById('<element_id'). If you wanted to target a class, you would document.querySelector('.<class_name>') for the first instance of the class, or document.querySeletorAll('.<class_name>')
Also, your input tag was misspelled "imput", and is a singleton tag so you don't have to close it off.
Assuming you wanted a way to trigger a click event, here's a basic example:
<head>
<script>
const test = document.getElementById('test');
const trigger = document.getElementById('trigger')''
test.addEventListener('click', () => {
const num_test = document.getElementById('num_tests').value;
for (let i = 0; i < num_test; i++) {
trigger.click();
}
});
trigger.addEventListener('click', () => {
console.log('trigger clicked');
});
</script>
</head>
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<input type="text" id="num_tests" value="">
<button id="trigger">
trigger it
</button>
</form>
</body>
https://jsfiddle.net/qr1z3d6e/2/
first in the jsfiddle.net link there are some errors such as imput instead of input.
I haven't tested it, but if I understand correctly is it something like this? try it.
<body>
<input id="myinput" type="text">00-99</input>
<button id="clickme">
</body>
<script>
var button = document.getElementById("clickme"),
count = 99;
var myInput = document.getElementById("myinput")
button.onclick = function(count){
count -= 1;
myInput.innerHTML = "00 " + count;
};
</script>
My view has a button and the view is looped.so it has raws.
when i click the button of a single raw i need to color that button.
so i added a onclick="select_Button(<?php echo $rawID?>)" to the raw's button in my view
select_Button is my funtion in js
function select_Button(rawNumberOfVote) {
var RawNumber = rawNumberOfVote;
alert ("Form submitted successfully" + RawNumber);
var upVote = document.getElementById("up_vote");
upVote.style.background = "green";
}
like above i send the rawID to the funtion.
how can i edit this line to accept the view called up_vote in that particular raw id that i got from parameter.
var upVote = document.getElementById("up_vote");
becuz if i only use this line it will color the first raw's button instead the one i wanted
Thank you
you can use data attribute in your html referencing to this page and this page. and retraive with this this jquery code snippet:
$("[data-test ='my value']")
or this code snnipet in javascript:
document.querySelectorAll(".example").find(function(dom){
return dom.dataset.test == "expected-value"
});
Update:
accourding to this page querySelectorAll return nodeList and NodeList are not array and we cannot use find method so I change my answer to this code:
<html>
<body>
<div class="post" data-key="1">
<lable>test</lable>
<button type="button" onclick="upvote(1)">up vote</button>
</div>
<div class="post" data-key="2">
<lable>test</lable>
<button type="button" onclick="upvote(2)">up vote</button>
</div>
<div class="post" data-key="3">
<lable>test</lable>
<button type="button" onclick="upvote(3)">up vote</button>
</div>
</body>
</html>
<script type="text/javascript">
var upvote = function(id) {
var nodes = document.querySelectorAll(".post");
console.log(nodes.length);
for(i = 0 ; i < nodes.length ; i++){
console.log(nodes[i].dataset.key);
if (nodes[i].dataset.key == id)
nodes[i].style.backgroundColor = "red";
}
};
</script>
Is it possible to get the ids of the 2 div tags on clicking the button, using javascript?
<div id="main">
<div id="content">
</div>
<button onclick="function();">show it</button>
</div>
I have 2 div tags here. The 1st div is in the main div while the content div is inside the main div and the button is inside the main div as well.
Is it possible to get the main and content id of the 2 div tags on clicking the button?
EXPECTED OUTPUT when I press the button:
alert: main
alert: content
You need to pass the element to the function. Then you can use parentNode to get the DIV that contains the button. From there, you can use querySelector to find the first DIV in the parent.
function showIt(element) {
var parent = element.parentNode;
alert(parent.id);
var content = parent.querySelector("div");
alert(content.id);
}
<div id="main">
<div id="content">
</div>
<button onclick="showIt(this);">show it</button>
</div>
<div id="main2">
<div id="content2">
</div>
<button onclick="showIt(this);">show it</button>
</div>
<div id="main3">
<div id="content3">
</div>
<button onclick="showIt(this);">show it</button>
</div>
document.getElementById('button').onclick = function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
var id = divs[i].getAttribute('id');
alert(id);
}
};
http://jsfiddle.net/jm5okh69/1/
This should work in all browsers and uses the cleaner .id method.
var button = document.getElementById('button');
button.onclick = getIDs;
function getIDs(){
var id,divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
id = divs[i].id // .id is a method
alert(id);
}
}
<div id="main">
<div id="content"></div>
<button id="button">show it</button>
</div>
I'm looking for a way to show my input content in multiple places, but nothing happens when I put getelementsbyclassname('output') instead of getElementById('output')
I actually have this but because of the getElementById, only the first element is changing
<script>
function functionname() {
document.getElementById('output').innerHTML=document.getElementById('input').value;
}
</script>
<input type="text" id="input" onkeyup="functionname();return false;" />
<span id="output"></span>
Thanks by advance, and sorry for the bad english
var spans = [].slice.call(document.querySelectAll('.output'));
var val = document.getElementById('input').value;
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = val;
}
This will work on spans with a class of output:
<span class="output"></span>
<span class="output"></span>
<span class="output"></span>
Two problems:
You have no element with a class of "output".
JavaScript is case-sensitive. getelementsbyclassname should be getElementsByClassName.
<span class="output"></span>
var input = document.getElementById('input'),
outputs = document.getElementsByClassName('output')
for (i=0; i<outputs.length; i++)
outputs[i].innerHTML = input.value;
However as you have jquery tagged, you can instead use the following:
$('.output').html($('#input').val());
Seems like you want to update the html of multiple divs based on the value of an input
HTML
<input type="text" id="input" />
<div class="output"></div>
<div class="output"></div>
JS
$('.output').html($('#input').val());
JSFiddle: http://jsfiddle.net/DDnXs/
The code
<div class="something>
<input type="text onchange="some_function(this)">
<span>Blqh blqh</span>
<span>Blq blq</span>
</div>
Once there is a change in the input I want some_function(this) to delete all <span> tags. So far in the function I have:
function some_function(x_this) {
var parent=x_this.parentNode;
}
How do i get all the <span> elements and delete them?
Thanks a lot
With the following HTML, for example
<div id="foo">
<input />
<span>Blqh blqh</span>
<span>Blq blq</span>
<br />
</div>
you could run this JavaScript
var parent = document.getElementById('foo'), i = parent.childNodes.length;
while (i--)
if (parent.childNodes[i].tagName === 'SPAN')
parent.removeChild(parent.childNodes[i]);
function some_function(x_this) {
var parent=x_this.parentNode,
spans = parent.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++){
parent.removeChild(spans[i]);
}
}
$('#parent').find('span').remove();
or use pure js
var childrenspan = document.getElementById('id').getElementsByTagName('span');
for(var i=0;i<childrenspan.length;i++)
{
childrenspan[i].parentNode.removeChild(childrenspan[i]);
}
If you are using jquery then add id to your Div tag and then
<div id="mydiv">
<input />
<span>Blqh blqh</span>
<span>Blq blq</span>
<br />
</div>
Use this jquery code:
$('#mydiv').find('span').remove()