Get input content in multiple div - javascript

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/

Related

Check Div Elements by name fast

I have some Divs:
<div id="content">
<div class="c" id="1">
<div id="xyz">dont care</div>
<div id="texts1">
<div name="check"> ContentText </div>
</div>
</div>
<div class="c" id="2">
<div id="xuyz">dont care</div>
<div id="texts2">
<div name="check"> ContentText </div>
</div>
</div>
</div>
I want to iterate through all elements of the "c" class.
Then I want to check, if the Div elements named "check" of each "c" element contains special text.
If true, then manipulate the "c" element (which contains the special text)
I tried something like this:
var ele = document.getElementsByClassName("c");
for(var i=0;i<ele.length;i++)
{
var check = ele[i].getElementsByName("check");
if(check.innerHTML ....)
}
But thats not working :/
Log from Firefox:
TypeError: ele[i].getElementsByName is not a function
Where is my mistake?
A simple querySelectorAll() should do the trick:
var check = document.querySelectorAll('.c [name="check"]');
And as stated in a comment already, only document has getElementsByName method.
With jQuery this is very simple -
$('[name="check"]:contains("your special text")')
With jQuery (you have tagged it with it as well)
$(document).ready(function () {
$('div.c').find('div[name="check"]').each(function(){
// here check HTML and do needed manipulations
if($(this).html() == 'ContentText'){
$(this).closest('div.c').children().first().html('I CARE');
}
});
});
see jSFiddle -> http://jsfiddle.net/ApfJz/32/
Here is a modification of your code to make it work as intended
var ele = document.getElementsByClassName("c");
for (var i = 0; i < ele.length; i++)
{
if (ele[i].getAttribute('name') === "check") {
// do something with matching elements here
}
}

How to delete particular tag from a parent node?

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()

HTML how delete tag but not content

how can I delete with javascript html tag (for example span) but not the content and the html tags in the content?
one example:
<div id="content">
<span id=1 class="note" >
<p> <span id=1 class="note" >hello! its one example </span> </p>
<li> <span id=1 class="note" >yes,one example </span> </li>
</span>
</div>
the result should be:
<div id="content">
<p> hello! its one example</p><li>yes,one example</li>
</div>
Since you haven't mentioned that you need JQuery, following is the code that I propose:
http://jsfiddle.net/9qgK7/
Relevant code:
span.outerHTML = span.innerHTML;
Reference: https://developer.mozilla.org/en-US/docs/DOM/element.outerHTML
PS: Firefox only started supporting outerHTML since v11 but we are already using v15 :)
In your particular example, its probably best practice to just overwrite the immediate parentNode.
var content = document.getElementById('content'),
span = content.getElementsByTagName('span')[0],
p = content.getElementsByTagName('p')[0];
content.innerHTML = span.innerHTML;
Can easily be done with Jquery:
$('span.note').each(function(){
$(this).replaceWith($(this).html());
});
If you can use jQuery, try something like this
var newContent = $("#content span").html();
$("#content").html(newContent);
EDIT
Pure JS solution
var spans = document.getElementById("content").getElementsByClassName("note");
var out = "";
for (var i = spans.length - 1; i >= 0; i--) {
out += spans[i].innerHTML;
}
document.getElementById("content").innerHTML = out;
jsFiddle Example

javascript: how to manage a div with no ID

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

find the id of the next element present in next div-jquery

My form has number of input elements. When i looping through some elements i need to find the id of the next element which is in next div.
The whole code is in jsfiddle
$(":text[name^=sedan]").each(function(i){
var curTxtBox = $(this);
var curId = this.id;
alert(curId);
//var nextTextFieldId = $(this).closest('div').find('.number').attr("id"); // gives undefined
var nextTextFieldId = $('#'+curId).next('div:input[type=text]').attr("id"); // gives undefined
alert(nextTextFieldId )
});
this is not working. nextTextFieldId gives value undefined.
html
<div class="first">
<div class="second">
<input type="text" class ="myClass" name="sedan1" id = "sedan1" value="1" />
</div>
<div class="third">
<input type="text" class ="yourClass" name="suv1" id ="suv1" value="2"/>
</div>
</div>
<div class="first">
<div class="second">
<input type="text" class ="myClass" name="sedan2" id = "sedan2" value="3" />
</div>
<div class="third">
<input type="text" class ="yourClass" name="suv2" id = "suv2" value="" />
</div>
</div>
var nextTextFieldId = $(this).parent().next().find(':text').attr("id");
Expanding my comment (summary: don't do this, simply iterate over the jQuery object with for and be happy) into an answer:
$(document).ready(function(){
var $textBoxes = $(":text[name^=sedan]");
for(var i = 0; i < $textBoxes.length; ++i) {
var $curTxtBox = $textBoxes.eq(i);
alert($curTxtBox.attr("id"));
if (i < $textBoxes.length - 1) {
var nextTextBoxId = $textBoxes.eq(i + 1).attr("id");
alert(nextTextBoxId);
}
else {
// This was the last one, there is no "next" textbox
}
}
});
Note that:
Doing things this way does not require walking the DOM tree all the time like naive approaches using each (which end up searching the tree for the same element multiple times).
This approach will work correctly as long as you keep the sedanXX ids. Approaches that re-walk the DOM tree will break as soon as there is any significant change to your HTML.
If all you want is the id's, and they are incrementing integers, even this is overkill.
Try changing to this line:
var nextTextFieldId = $('#'+curId).parent().next('div:input[type=text]').attr("id"); // gives undefined
Your line expects the input tag to have a sibling div tag.

Categories

Resources