I have some problem with javascript event handlers and I really want to know what am I doing wrong.
Here's the thing, I want to alert the hovered div's width, but as soon as the page is loaded, the alert appears.
Here's the HTML:
<div id="mainContainer">
<div id="container_1" style="width:200px"></div>
<div id="container_2" style="width:100px"></div>
<div id="container_3" style="width:300px"></div>
<div id="container_4" style="width:150px"></div>
</div>
and here's the js:
dataRetrieving = {
getWidth:function(id){
var box = document.getElementById(id);
var tempResult = box.style.width;
return tempResult;
}
}
var container = document.getElementById("container_1");
container.onmouseover = function(){
alert(dataRetrieving.getWidth("container_1"));
};
already answered, thanks :D
I'd appreciate any tip you guys give me.
Thanks in advance!
You would need to set your onmouseover with something like this:
container.onmouseover = function(){
dataRetrieving.getWidth("container_1");
};
In your current code, the event handler (set to container.onmouseover) is set to the result of dataRetrieving.getWidth(...) - which is nothing, since getWidth doesn't currently return anything. This is also causing the alert to appear immediately, since the function is executing immediately. (In order to be valid, it would have to return another function.)
container.onmouseover = dataRetrieving.getWidth("container_1");
You are calling that function there that's why it's alerting on the page load.
Related
sorry about this might be weird question with weird title.
i have this function in Javascript:
function alfred(){
document.querySelector('.image-7-panel').classList.toggle('notactive');
document.querySelector('.image-8-panel').classList.toggle('notactive');
document.querySelector('.background').classList.toggle('alfred-background');
var text = document.getElementById("heroes");
if(text.innerHTML !== "Alfred"){
text.innerHTML = "Alfred";
} else {
text.innerHTML = "Heroes are back";
}
}
but I want that after this is running, it goes back to where it was before running. how can I put this running? This function runs on click and with the same click another one runs. The clearTimeout is not helping me here but can't find a normal solution for this.
Going to explain with the real example. When I click, shows an image and a name associated. I want that after I click, the image goes back to the one it was before clicking and also the nam
Instead of adding this handler on only "onclick" event, add this on "onmouseup" and "onmousedown" events
<div onmouseup="alfred()" onmousedown="alfred()">Example</div>
I'm trying to make my webpage alert text when an element has been double-clicked using jQuery. Here's my JS:
$("#dashboard-acrs-map").dblclick(function () {
alert("asdasdasdasd")
})
And HTML:
<div class="dashboard-acrs-map-div" id="dashboard-acrs-map"></div>
Am I doing something wrong? Because the alert doesn't come up...
Note: It seems to be working UNLESS the element (#dashboard-acrs-map) is created using JS. How can I fix this?
That pretty much has to be your selected element not existing. It is possible that the script runs before the element is loaded. Place the script at the end of the body for example to make sure this is not the case.
$("#dashboard-acrs-map").dblclick(function () {
alert("asdasdasdasd")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard-acrs-map">
Element
</div>
Dynamic element creation example:
document.querySelector("button").onclick = () => {
var element = document.createElement("div");
element.id = "double-click-me"; // Who cares though?
element.textContent = "Double Click Me";
element.ondblclick = () => alert("Double!"); // Hook up double click here.
document.body.appendChild(element);
};
<button>Create Double-Clickable</button>
(Furthermore, i believe that jQuery should never be used.)
I don't know why but when I click on "button" nothing happens...
No message in console, no error. How to fix it ?
JS
var bird = (function(){
let button = document.querySelector('#addBird');
button.addEventListener('click', addBird);
function addBird()
{
console.log('addBird');
};
return {
addBird: addBird
};
})();
HTML
<button id="addBird">Add Bird</button>
Just tried this example in CodePen:
http://codepen.io/JasonGraham/pen/pbowXz
var bird = (function(){
let button = document.querySelector('#addBird');
button.addEventListener('click', addBird);
function addBird()
{
console.log('addBird');
};
return {
addBird: addBird
};
})();
As far as I can see, your code appears to be working as expected. In Chrome, clicking on the button causes the "addBird" message to be logged to the console each time.
Are you expecting something different?
This happens because the JavaScript loads before the DOM (basically, the HTML markup) is ready. Therefor, the button variable equals NULL.
Two ways to solve this:
Move your JavaScript at the end of the page, just before the </body> tag.
Wrap your JavaScript code with jQuery's document ready function:
$(function() {
// code here
});
Ok if I insert and outside the #birdMod It works... So it was not the .render() function. Thank you for your help. :)
I have a script, which I'm using to try and display only one section of a webpage at a time.
function showMe(id){ clearPage(); changeDisplay(id, "block"); console.log(id)}
Currently, I'm using buttons to change which section is displayed.
var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=showMe("a-btn-section-id");
otherBtn.onclick=showMe("other-btn-section-id");
However, when I load the page, the following happens:
I see the function attached to each button activate once in sequence in the console.
The page refuses to respond to further button inputs.
Testing with the console shows that showMe() and the functions it calls still all work properly. I'm sure I'm making a very basic, beginner mistake (which, hopefully, is why I can't find this problem when I Google/search StackOverflow/read event handling docs), but I'm at a loss for what that mistake is. Why would my script assume my buttons are clicked on load, and why won't it let me click them again?
You're calling the function an assign the value to onclick property instead of attach the function, try defining your onclick property as:
aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};
Try the follow jsfiddle:
function showMe(id){ // some stuff..
console.log(id)
}
var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};
<input type="button" value="a-btn" id="a-btn"/>
<input type="button" value="other-btn" id="other-btn"/>
Hope this helps,
I am trying to make a div expand as the user presses a button over and over again.
<script>
heartClicks=10;
function love(){
heartClicks++;
}
</script>
How can I set the width of the div equal to heartClicks?
<div id="luv"></div>
document.getElementById('luv').style.width = heartClicks + "px";
document.getElementById("luv").style.width = heartClicks + "px";
Something to keep in mind is you're going to need to reset/reapply the style everytime they click so you might want to stick this in your button click function.
var heartClicksElement = document.querySelector("#luv");
heartClicks = heartClicksElement.style.width;
#aug's answer is great for standard javascript (make sure you have an event handler). If you want to use jQuery (or if anyone else browsing this question wants to use jQuery) try the following:
var heartClicks=10;
$(function(){
$('#expand').on("click",function(){
heartClicks++;
$('#luv').css({'width':heartClicks});
});
});
Try it out with this working fiddle.