and thanks to anyone who can help me!
I have a text with this code:
<a onclick="return showPic(this); mostrarespectacular()" href="Imatges/productosnuevos/urbano01.jpg">  Circuito Espectacular Barcelona</a>
and the scripts are:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgContenedor').src = whichpic.href;
if (whichpic.title) {
document.getElementById('imgDescripcion').childNodes[0].innerHTML = whichpic.innerHTML;
}
return false;
} else {
return true;
}
}
</script>
<script type="text/javascript">
function mostrarespectacular() {
div = document.getElementById('circuloespectacular');
div.style.display = 'inline';
}
function cerrarespectacular() {
div = document.getElementById('circuloespectacular');
div.style.display='none';
}
</script>
and my problem is that the first function works perfect but not the second one (which has to show a div). Any ideas of what i'm doing wrong? Thanks!!
You return from the onclick after the first function call. Remove that and you should be fine.
The "return" is branching out of the script after calling the showPic() function. Remove the return or place it before the "mostrarespectacular()" call or move it to the end, etc.
Related
I am trying to change an image in my HTML, via an If/else statement, so the page displays an image depending on a value from another script
i currently have this code
<script>
if (b.className="yes") {
img src="Site/assets/HappyObama.jpg"
}
else {
img src="Site/assets/SadObama.jpg"
}
how can i fix this? Is there something within Javascript that does this?
Here is working example
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<img id="img" src="#">
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
var i = true;
if(i) {
document.getElementById("img").src = "https://www.w3schools.com/css/trolltunga.jpg";
} else {
document.getElementById("img").src = "http://wallpaper- gallery.net/images/image/image-13.jpg";}
}
</script>
</body>
</html>
Use a function to set the value for src.
function getImage(className) {
var image = "";
if (className == 'yes') {
image = "Site/assets/HappyObama.jpg"
}
else {
image = "Site/assets/SadObama.jpg"
}
return image;
}
Assign an id to your img tag, then you can
//First using jQuery
<script>
if (b.className="yes")
{
$("#img").attr('src', 'Site/assets/HappyObama.jpg');
}
else
{
$("#img").attr('src', 'Site/assets/SadObama.jpg');
}
</script>
//Second using javascript
<script>
if (b.className="yes")
{
document.getElementById("img").src="Site/assets/HappyObama.jpg";
}
else
{
document.getElementById("img").src="Site/assets/SadObama.jpg";
}
</script>
Lemme know if the problem resolved. Happy to help
You can do like this
if (b.className="yes") {
document.getElementById("imageid").src="Site/assets/HappyObama.jpg";
} else {
document.getElementById("imageid").src="Site/assets/SadObama.jpg";
}
I am creating a simple function to close a flash message div on click event, but my listener is not firing.
I wrote 3 different functions to try to get it working, but nothing is happening and Chrome console isnt telling me anything.
My first was in ES6 class style, this one:
class closeFlashMessages {
constructor () {
this.getFlashMessages = document.querySelector("#flash-messages");
this.addEventListeners();
}
close () {
console.log(this.getFlashMessages);
this.getFlashMessages.className = "hide";
}
addEventListeners () {
if(this.getFlashMessages)
this.getFlashMessages.addEventListener("click", this.close);
}
}
new closeFlashMessages();
My second was this:
(function (){
let getFlashMessages = document.querySelector("#flash-messages");
function close () {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
function addEventListeners () {
getFlashMessages.addEventListener("click", function () {
close()
});
}
addEventListeners();
});
My last one is this:
(function (){
let getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", close(getFlashMessages));
function close (id) {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
});
My HTML:
<div id="flash-messages">
<div class="flash success">
<p>Recept byl přidán do nákupního seznamu.</p>
</div>
</div>
But none of them worked!! I dont understand
With the first two, I was getting undefined on my this.getFlashMessages also not sure why.
My solution is not in ES6
function Init(){
var id = document.getElementById('flash-messages');
var msg = document.querySelector('.flash');
id.addEventListener('click',function(){
msg.className = 'hide';
});
}
Init();
see demo here
I am not very much familiar with ES6.
But if I try similar code sample on a javascript it will be as given below and I hope it will be almost similar in ES6 aswell.
var getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", function()
{
clicked(getFlashMessages);
});
function clicked(id){
console.log(id);
id.className = "hide";
}
Here, I am calling anonymous function, and its default argument will be event object as given in https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.
I want to refresh the content of a div with jquery. I have this code but it always says the data and data_check doesn't match while they do when I alert them...
$(document).ready(function(){
pageLoad();
});
function reloadPage()
{
setTimeout(function(){
pageLoad();
},5000);
}
function pageLoad()
{
var data_check = $("div.portlet-body").html().replace(/\s+/g, '');
$.post("paginas/overzicht_sub.php",
function(data){
var data_output = data.replace(/\s+/g, '')
if(data_output==data_check)
{
return false;
}
else
{
$("div.portlet-body").html(data);
}
});
reloadPage();
}
Can someone help? I don't see the problem...
Ok I found the problem! There was a A-tag that always ended when there was no A-tag started. In the HTML (data_check) was that tag deleted and in the data not. Many thanks for the responses, I try to do it the next time with versions!
Remove the replace statement in pageLoad()
function pageLoad(){
var data_check = $("div.portlet-body").html();
$.post("aginas/overzicht_sub.php", function(data){
if(data_output==data){
return false;
}else{
$("div.portlet-body").html(data);
}
});
reloadPage();
}
Some of the javascripts on this site: http://www.bristolhotel.com/pizzeria/onlinepizza3.php doesn't work in Firefox. What's the problem?
<script language="JavaScript">
function OpenDiv(popUpDiv){
popUpDiv.style.display="block";
window.setTimeout("Hide();", 2000);
}
function OpenDiv(blanket){
blanket.style.display="block";
window.setTimeout("Hide();", 2000);
}
function Hide() {
document.getElementById('popUpDiv').style.display='none'
document.getElementById('blanket').style.display='none'
}
</script>
<script language="JavaScript">
function OpenCloseDiv(divName) {
if (divName.style.display == "none") {
divName.style.display="block";
} else {
divName.style.display="none";
}
}
</script>
The code you provided isn't actually the problem.
If you look at the error console (I'm assuming you didn't), you'll see errors like "nr11 not defined". And this is why :
<a onclick="OpenCloseDiv(nr11)"
I don't know where you have the variable nr11 defined, but you'll probably want to make it a string: "nr11" instead.
try to change window.setTimeout("Hide();", 2000); to window.setTimeout(Hide, 2000);
I changed the code to this:
<script type="text/javascript">
function OpenCloseDiv(divName){
var div = document.getElementById(divName);
if (div.style.display == "none") {
div.style.display="block";
}
else {
div.style.display="none";
}
}
</script>
<script type="text/javascript">
function OpenDiv(popUpDiv){
var div = document.getElementById(popUpDiv);
div.style.display="block";
window.setTimeout("Hide();", 2000);
}
function OpenDiv(blanket){
var div = document.getElementById(blanket);
div.style.display="block";
window.setTimeout("Hide();", 2000);
}
function Hide()
{
document.getElementById('popUpDiv').style.display='none'
document.getElementById('blanket').style.display='none'
}
</script>
and then added "" ( ) and it seems to work now. :)
Thank you for all your help! Really appreciate it!
I am a beginner in javascript, can you tell me what's wrong with the below code?
I want this to invoke buttonPressed() when a button gets pressed. From buttonPressed() it should call changeColor1(), changeColor1() should change the text color of a paragraph, and start a timer to invoke changeColor2(). Similarly changeColor2() should also change the color and call changeColor1() once the timer expires.
<html>
<head>
<script type="text/javascript">
function changeColor2()
{
alert("2");
var v = document.getElementById("onet");
v.style.color = rgb(0,255,255); // this statement is not working
var t=setTimeout(changeColor1,3000);
}
function changeColor1()
{
alert("1");
var v = document.getElementById("onet");
v.style.color = rgb(255,255,0); // this statement is not working
var t=setTimeout(changeColor2,3000);
}
function buttonPressed()
{
alert("Hello");
changeColor1();
}
</script>
</head>
<body>
<p id="onet"> Hello how are you? </p>
<form>
<input type="button" value="Display alert box!" onClick="buttonPressed()" />
</form>
</body>
</html>
Do not invoke the function, pass the reference only:
var t=setTimeout(changeColor2,3000);
I think you want style.color not .color.
By the way... please tell us what the code is supposed to actually do and what is wrong initially.
You need to quote style property values-
v.style.color = 'rgb(255,255,0)';
1) I don't like the fact that you have two timeouts set. Just call one function and use a flag to toggle between the two options.
2) The parameter to setTimeout that you want to use is a function pointer (changeColor) not the result of a function call (changeColor())
var flag = false;
var t;
function changeColor()
{
var v = document.getElementById("onet");
if(flag){
v.color = rgb(255,255,0);
} else {
v.color = rgb(0,255,255);
}
flag = !flag;
}
function buttonPressed()
{
alert("Hello");
t=setInterval(changeColor,3000);
}
Not really knowing what it is you're trying to do, I can tell you that your button's onClick handler references a method name that isn't in your code. Judging by the names of your methods, I think you meant to put "buttonClicked" in there.
Nevermind, looks like you changed it while I was typing.
Instead of v.color = rgb(0,255,255); use v.style.color = "#0ff".