How do i change 2 class "myDiv" span name at the same time? Below script only work for the first "myDiv"
<div class="myDIV">
<span>orginial name1</span>
</div>
<div class="myDIV">
<span>orginial name2</span>
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementsByClassName("myDIV");
x[0].innerHTML = "<span>new name for all</span>";
}
</script>
document.getElementsByClassName("myDIV");
will give array of elements, you are referring to only first element by [0].
update your function as below to change in both.
function myFunction() {
var x = document.getElementsByClassName("myDIV");
x[0].innerHTML = "<span>new name for all</span>";
x[1].innerHTML = "<span>new name for all</span>";
}
Alternatively you can use jquery to achieve it in just one line.
$('.myDIV').html("<span>new name for all</span>");
if it is working for the first one,then this should work for second one
function myFunction() {
var x = document.getElementsByClassName("myDIV");
x[0].innerHTML = "<span>new name for all</span>";
x[1].innerHTML = "<span>new name for all</span>";
}
A little simple things sometimes forgotten, this simply by adding x[1].innerHTML = "<span>new name for all 2</span>";
function myFunction() {
var x = document.getElementsByClassName("myDIV");
x[0].innerHTML = "<span>new name for all 1</span>";
x[1].innerHTML = "<span>new name for all 2</span>";
}
<div class="myDIV">
<span>orginial name1</span>
</div>
<div class="myDIV">
<span>orginial name2</span>
</div>
<button onclick="myFunction()">Try it</button>
Related
start html ----------------------
div id="pageWrapper"> //page wrapper
<div id="page-image"><img src="./images/lightHouseB.png"></div>
<div id="man-image"><img src="./images/sailor.png"></div>
<section>
<header>There Are Things in the Dark, can you Find them? </header>
<!-- basic html title page -->
<div id="textBox">
<a id="mousee" href="#">Hidden Ships</div></a>
</div>
</section>
html end point -----------------------------------
window.onload = eventMonitor();
function eventMonitor(){
document.getElementById('manimage').addEventListener('onmouseover', popMap(), false);
document.getElementById('mousee').addEventListener('click', shipsSlider(), false);
function popMap(url='shipsSlide.html',windowName, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url=" ", "Ship Pictures", toolbar='no', directories="no", status='no');
}
keep getting a null value - can not read property of eventlistener of null.
You need to reference the function to window.onload, and it will be called once the window loads.
See the difference here.
window.onload = onload;
function onload(){
console.log('DOM loaded');
}
And here I am referencing whatever onload will return, in this case a function.
window.onload = onload(); // This will return the anonymous function of onload
// __________________|^^|
function onload(){
return function(){
console.log('DOM loaded');
}
}
So what you want to do is to remove () so your code becomes:
window.onload = eventMonitor; // eventMonitor will be run once windows loads.
I am using jsTree in angularjs and using "select_node" in "ready". This method is returning false. On code debugged, it is observed that tree.instance._model.data doesn't have that node so this.get_node(obj); returns false. (below is code snippet)
select_node : function (obj, supress_event, prevent_open, e) {
var dom, t1, t2, th;
if($.isArray(obj)) {
obj = obj.slice();
for(t1 = 0, t2 = obj.length; t1 < t2; t1++) {
this.select_node(obj[t1], supress_event, prevent_open, e);
}
return true;
}
obj = this.get_node(obj); //here it returns false
if(!obj || obj.id === '#') {
return false;
}
}
I am not sure why tree.instance._model.data doesn't have data at that time because it often works when I refresh the browser.
Any help? Below is my code snippet.
me.onTreeReady = function (eve, tree) {
tree.instance.deselect_all();
tree.instance.refresh(true, true);
var response = tree.instance.select_node(defaultNode);
}
This must be some kind of race condition related to your angular directive provider.
This issue has been resolved. I had added "id" to html, so when multiple instances were created with same id it gives the above error. Issue resolved by removing this id.
Old Code
<div class="row no-margin" cg-busy="ctrl.promise">
<div class="bg-white">
<div **id="treeView"** js-tree="ctrl.treeConfig"
should-apply="ctrl.applyModelChanges()"
ng-model="ctrl.treeData"
tree="ctrl.treeInstance"
tree- events="ready:ctrl.onTreeReadyEvent;select_node:ctrl.onNodeSelectEvent;deselect_node:ctrl.onNodeDeselectEvent">
</div>
</div>
</div>
New Code:
<div class="row no-margin" cg-busy="ctrl.promise">
<div class="bg-white">
<div js-tree="ctrl.treeConfig"
should-apply="ctrl.applyModelChanges()"
ng-model="ctrl.treeData"
tree="ctrl.treeInstance"
tree- events="ready:ctrl.onTreeReadyEvent;select_node:ctrl.onNodeSelectEvent;deselect_node:ctrl.onNodeDeselectEvent">
</div>
</div>
</div>
Javascript. The following code works, but I have to call the function 3 times.
Should I be using replaceChild()?
This is what I have so far:
<!DOCTYPE html>
<html>
<body>
<ul id="myList1"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<ul id="myList2"><li>a</li><li>b</li><li>c</li><li>d</li></ul>
<p id="demo">Click the button to move an item from one list to another</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var tmp = 5;
for(var i = 0; i < tmp; i++)
{
var node=document.getElementById("myList2").getElementsByTagName("LI")[i];
document.getElementById("myList1").appendChild(node);
var node2=document.getElementById("myList1").getElementsByTagName("LI")[i];
document.getElementById("myList2").appendChild(node2);
}
}
</script>
</body>
</html>
You don't need to replace anything, just move nodes with appendChild Something like this:
function myFunction() {
var list1 = document.getElementById("myList1"),
list2 = document.getElementById("myList2"),
length1 = list1.children.length,
length2 = list1.children.length;
while (list1.children.length) {
list2.appendChild(list1.children[0]);
}
while (list2.children.length > length2) {
list1.appendChild(list2.children[0]);
}
}
Demo: http://jsfiddle.net/dfsq/4v94N/1/
I have a input field where value is equal to the id's and a button. When that button is triggered I want to remove the id in the input field also the button where the value is equal to the data stored in the input field or the id. Here http://jsfiddle.net/leonardeveloper/hcfzL/3/
HTML:
<form id="materialForm" action="#" method="post">
<input id="materials" type="text" name="materials" value="1,2,3" readonly="readonly" disabled="disabled" />
</form>
<div id="display">
<button class="removes" value="1">x</button>
<button class="removes" value="2">x</button>
<button class="removes" value="3">x</button>
</div>
JS:
$(document).on('click', '.removes', function () {
var id = $(this).val();
alert(id);
$('#materials').remove(":contains('" + id + "')");
$('#display').remove(":contains('" + id + "')");
return false;
});
.remove() is for removing DOM elements, not text from values. And it removes the element it's applied to, not elements that are contained within it.
$(document).on('click', '.removes', function () {
var id = $(this).val();
alert(id);
var materials = $('#materials').val().split(',');
materials = materials.filter(function(e) {
return e != id;
});
$('#materials').val(materials.join(','));
$(this).remove();
return false;
});
FIDDLE
The :contains selector is for selecting DOM nodes that contain other DOM nodes. In your case you look to be selecting input elements which have a particular string in their value.
You should probably use .filter to filter to select the input elements that match the filter.
Try
$(document).on('click','.removes',function(){
var id = $(this).val();
$('#materials').val(function(){
var value = this.value, array = value.split(',');
var idx = $.inArray(id, array);
if(idx >=0 ){
array.splice(idx, 1)
value = array.join(',')
}
return value;
})
$(this).remove();
return false;
});
Demo: Fiddle
I have an array in my View Model. Items of this array are objects of Person that has two properties. when I bind this to a template it's okay. but when I change the state of one of the properties it does not reflect in UI.
what did I do wrong ?
<script type="text/html" id="person-template">
<p>Name: <span data-bind="text: name"></span></p>
<p>
Is On Facebook ?
<input type="checkbox" data-bind="checked: IsOnFacebook" />
</p>
</script>
<script type="text/javascript">
var ppl = [
{ name: 'Pouyan', IsOnFacebook: ko.observable(true) },
{ name: 'Reza', IsOnFacebook: ko.observable(false) }
];
function MyViewModel() {
this.people = ko.observableArray(ppl),
this.toggle = function () {
for (var i = 0; i < ppl.length; i++) {
ppl[i].IsOnFacebook = false;
}
}
}
ko.applyBindings(new MyViewModel());
</script>
when I press the button I want to make changes in People.IsOnFacebook property. the changes will be made successfully but the UI does not show.
You should call it like a function. Like:
ppl[i].IsOnFacebook(false);
This because the ko.observable() returns a function. It's not a property you call anymore but a function call. So in the background they will update your UI. To retreive a property that is observable. You should also use the function call.
Please see this tutorial: http://learn.knockoutjs.com/#/?tutorial=intro