I am trying to get the attributes for a selected div, when i do alert and the div name, it give me the div name but when i do alert divname.style.backgroundcolor, it gives me an error, undefined. I have noticed that its only when i add the attribute to the selected div, it gives me an error and if i type the name of the div directly with the attribute
it gives me the right answer.
function getdiv(){
var selecteddivname = document.getElementById("divname").value;
alert(selecteddivname); // this works, it shows the divname right
alert(selecteddivname.id); // its shows undefined
alert(selecteddivname.style.backgroundColor); //its shows undefined
alert(moused.style.backgroundColor); //this works, mouse being the actual div name
}
It sounds like you're trying to get at the attributes of a div identified by the input with the id divname.
If so:
function getdiv(){
var selecteddivname = document.getElementById("divname").value;
var selecteddiv = document.getElementById(selecteddivname);
console.log(selecteddivname);
console.log(selecteddiv.id); // should match
console.log(selecteddiv.style.backgroundColor);
console.log(moused.style.backgroundColor);
}
try to use valid attributes for div like this
<script type="text/javascript">
function getdiv(){
var selecteddivname = document.getElementById("divname").id;
alert(selecteddivname); // this works, it shows the divname right
alert(selecteddivname.id); // its shows undefined
alert(selecteddivname.style.backgroundColor); //its shows undefined
alert(moused.style.backgroundColor); //this works
}
</script>
and here the tag
<div id="divname" name="mahmoud" onmouseover="getdiv()" >how are you guys</div>
hope this be helpful
Related
I'm trying to write a value from the DOM into a Google Tag Manager Variable. I'm using the standart variable "Click Element". The Element i want to track is an HTML element with some attributes. If i let the variable be shown in the console it works like a charm. If i return the same value, google manager shows "undefined" in the debug mode.
What could be the mistake?
function() {
var e = {{Click Element}};
var namestr = e.dataset.src.split("/")[10];
console.log(namestr); //works
return namestr; //doesnt work
}
The reason was simple. I don't know why, but the "click element" variable of the Google Tag Manager is NOT filled by the element the user clicked. It uses the parent element above. So the answer is:
var namestr = e.children[0].src.split("/")[10];
So I have created a simple code, so when the user clicks a child div of 'speaker-cookie' parent, they then set a localstorage value. Code is:-
$(".speakers-cookie div").on( "click", function() {
var speakerpop = $(this).attr("class");
localStorage.setItem('speaker', speakerpop);
});
This is working well, when on another page I want to get the value for the speaker and test IF the value matches a div, then change the colour of the div. I have tried the following:-
<script>
var speakercolor = localStorage.getItem("speaker");
$('body').find(speakercolor).css('background','red')
</script>
Could someone please advise what I am doing wrong here? This is not colouring the div atall.
Thank you
I am learning DOM Events and I keep receiving an error message.
my code is the top half works perfectly however the remove section keeps getting the following "Uncaught TypeError: document.getElementByClassName is not a function
at js.js:7"
any advice much appreciated.
`var button= document.getElementById("button");
button.addEventListener('click', function() {
alert ("Click!!!!!!!!!!");
});
var remove = document.getElementByClassName("remove");
remove.addEventListener('click', function() {
return ("removed!!!!!!!!!!");
});`
You may have a type error, remember you are referencing many dom elements and not just one
it should be getElementsByClassName not getElementByClassName
which you can then loop over the elements using array method to append listener on each. Example code below;
let remove = document.getElementsByClassName("remove");
remove.forEach(elem => {
elem.addEventListener("click",myEventHandler);
});
used jssor slider , i have some pages with same jssor slider , some pages are working fine , but some pages comes Outer container 'null' not found. bug , can any one help on this ?
I had a similar problem, so did some digging to see what the issue was.
The setup starts with the initial call, here's the snippet from the demo site
http://www.jssor.com/development/index.html
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
which, among setting up all kinds of utility functions- more importantly does this
function JssorSlider(elmt, options) {
var _SelfSlider = this;
...
// bunch of other functions
...
$JssorDebug$.$Execute(function () {
var outerContainerElmt = $Jssor$.$GetElement(elmt);
if (!outerContainerElmt)
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
});
}
so at this point, it's trying to collect the string you passed, which is the elmt variable- which is for what? Well let's take a look at that $GetElement function in jssor.js
_This.$GetElement = function (elmt) {
if (_This.$IsString(elmt)) {
elmt = document.getElementById(elmt);
}
return elmt;
};
So, really, what it comes down to is this line for finding the element.
elmt = document.getElementById(elmt);
So the base of this error is
"We tried to use your string to find a matching ID tag on the page and it didn't give us a valid value"
This could be a typo, or another line of code modifying/removing the DOM.
Note that there are some scripts try to remove or modify element in your page.
Please right click on your page and click 'Inspect Element' menu item in the context menu.
Check if the 'outer container' is still there in the document. And check if there is another element with the same id.
Check if "Slider1_Container" is present or Used.
In my case, I didn't have it in my html, but still I had added the js.
Removing js resolved my issue.
I want to know if an anchor link is clicked.
I add anchor links dynamically and set ids with their name file but i dont know how amoutn the number of the cell "clicked" in my Spreadshett.
For ex: the id of file "test.pdf" --> test;
in spreadsheet:
ex:
ColumA <namefile>: test.pdf
ColumB <linkfile>: https://docs.google.com/document/d/1PiMj.....jramcs
ColumC <cliked>: 1
I'm specting that if i clicked my anchor my function could know which anchor is cliked and amount " 1 " in colum C in the ppropriate row.
var html = app.createAnchor(nf, hf).setId(nf);
I am trying to make something like:
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
¿But how i know which anchor is cliked in the function sumDoc?
I think you can get that using client handlers and a textbox (this last one can be visible or not).
var clickedItem = app.createTextBox().setName('clickedItem')
On each anchor you add a clickHandler like this
var handler = app.createClientHandler().forTargets(clickedItem).setText(Anchorname);
anchor.addClickHandler(handler)
and in the server handler you will get the textBoxValue with
var clickedItem = e.parameter.clickedItem;
if you want a more accurate code you should provide the code you use to create the UI with the anchors
This is also possible and easy, format your anchor like you said.
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
Now your return function:
function sumDoc(e){
//this will return the value of the ID of the element thats clicked so in this case its test.pdf
var linkId = e.parameter.source;
}
I hope this is useful