The picture appears and disappears instantly
I need to change the picture at the click of a button, but it appears and disappears instantly. What to do in this case, please help. By pressing I call the function php and in it the js code for changing the picture. Already everything I knew was retried. How to deal with this?
Game.php :
<?php
require "php/set_locations.php";
?>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="styles/GameStyle.css">
</head>
<body>
<div class="main_container">
<div class="header"></div>
<div class="body_container">
<div class="left_menu_container">
<div class="left_menu_main_div">
<a class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/Left_menu.js"></script>
</div>
</div>
<div class="main_image_container">
<div class="image_container">
<div class="img_container">
<img class="image_location" id="image_location" name="image_location" src="">
</div>
</div>
</div>
<div class="location_buttons_container">
<div class="buttons_container">
<form method="post">
<ul class="buttons_menu">
<li>Локации</li>
<li ><span ><button id="location_button_1" name="location_button_1">Главные ворота</button></span><em>3 сек.</em></li>
<li><span>Торговый квартал</span><em>2 сек</em></li>
<li><span>Замок</span><em>5 сек</em></li>
<li><span>Гильдия</span><em>4 сек</em></li>
</ul>
</form>
</div>
</div>
</div>
<div class="footer_container">
<div class="left_footer_block"></div>
<div class="textarea_container">
<textarea class="main_textArea" readonly></textarea>
<div class="input_and_button_container">
<input class="input_for_main_textArea">
<div class="button_container">
<button class="set_text_button" ></button>
</div>
</div>
</div>
<div class="onlinelist_container">
<div class="online_list">
<ul class="online_list_ul">
<li><span>Герои в локации</span><em></em></li>
<li><span>IIITUKATUPKA</span><em>8</em></li>
<li><span>Tataliec</span><em>7</em></li>
<li><span>Nekita2012</span><em>6</em></li>
<li><span>Brion</span><em>5</em></li>
<li><span>Joken</span><em>4</em></li>
<li><span>Golden</span><em>5</em></li>
</ul>
</div>
</div>
</div>
</div>
<?php
if(isset($_POST["location_button_1"])){
setLocation(4);
}
?>
</body>
</html>
setLocation.php:
<?php
require "include_db.php";
function setLocation($url_image){
$locationName = R::load('locationsdb', $url_image);
echo '<script type="text/javascript">
var img = "'.$locationName->location_image.'";
var button1 = document.getElementById("location_button_1");
button1.addEventListener("click", function(){
});
//document.getElementById("location_button_1").onclick = () => asd();
</script>';
}
?>
<script>
function cccc(){
document.getElementById("image_location").src =img;
}
</script>
Related
```
<html>
<head>
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/1.css">
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/2.css">
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/3.css">
</head>
<body>
<div id="none" style="display:none;">
<div class="chat">
<div class="chat-title">
<h1>Fabio Ottaviani</h1> ×
<h2>Supah</h2>
<figure class="avatar">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156381/profile/profile-80.jpg"></figure>
</div>
<div class="messages" style="overflow-y:scroll;scrollbar-width: none;">
<?php include 'commentinuovo.php';?>
<div class="messages-content"></div>
</div>
<form method="POST" action="config.php">
<div class="messages-content"></div>
<div class="message-box">
<textarea type="text" class="message-input" placeholder="Type message..." name="text"></textarea>
<input type="submit" name="submit" onsubmit="setTimeout(function () { window.location.reload(); }, 10)" id="button" >
</div>
</form>
</div>
<div class="bg"></div>
</div>
</body>
</html>
```
when I click the submit button it does its job, but there is a way to make the page reload when clicked and the form display remains empty??
so when I click both I reload the page and leave #none opened
I get a problem when creating a dropdown list. When I trigger the dropdown by toggle the "show-item" class, it doesn't work. Can you guys help me to see what happen? Thx!!! There's the code below
var duration_dropdown = document.getElementById('duration-dropdown');
var mins_ctn = document.getElementById('mins-ctn');
duration_dropdown.onclick = function(){
mins_ctn.classList.toggle('show-item')
}
<body>
<div class="container">
<div class="title">
<h1>Dropdown Demo</h1>
</div>
<div class="dropdown-ctn">
<div class="dropdown">
<button id="duration-dropdown" class="dropdown-mins">MM</button>
<div class="mins-ctn" id="mins-ctn">
<span class="minute">01</span>
<span class="minute">02</span>
<span class="minute">03</span>
<span class="minute">04</span>
</div>
</div>
</div>
</div>
<script src="dropdown.js"></script>
</body>
i have this code, witch is basically a click counter in javascript.
my question is, is it possible to show the "clicks" in two different pages?
My goal is to make two identical pages, but the second one is just to show the click counting, as the first one is to click and at the same time to show the counting.
i dont have much experience in programing.
all help is much apreciated :)
html page code:
<!DOCTYPE html>
<html>
<head>
<title>FCT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/scripts.js"></script>
<script src="chama.js"></script>
</head>
<body>
<button type="button" onclick="hello()">Anterior</button>
<button type="button" onclick="bye()">Próximo</button>
<div class="barraTop"> </div>
<div class="container page">
<div class="row barraSuperior">
<div class="col-xs-1">
<img src="imagens/espamol.png" height="150" width="250">
</div>
<div class="col-xs-11" style="text-align: right;">
<p></p>
<span class="uespiTexto">Escola Secundária Padre António Martins de Oliveira</span><br>
<span class="subtitulo">Matrícula Institucional <strong>SiSU 2019</strong></span>
<!-- <img src="imagens/sisu.png" class="sisuLogo"> -->
</div>
</div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="barraTop"> </div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ultimaSenha">
<br>
<span id="ultimaSenhaTexto">ÚLTIMA CHAMADA</span><br>
<span>Senha </span>
<span id="ultimaSenhaNumero">0000</span>
</div>
</div>
</div>
<audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>
and javascript code:
var clicks = 0;
function hello() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function bye() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
Only if one page opens the other one*.
If you use var w=window.open() you can access the other page's document in w.document. And, from the second page, you can access the first one's in window.parent.document.
*That is with js only. If you can use a server language you could make something more complex using ajax or even sockets.
i have a page in web 'about TOEFL'. if i click about TOEFL, then the content/form was changing to content/form about TOEFL. when i click 'about TOEFL' the content was changing but when i click 'close', the form/content not changing. please help
this is my page code
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1">About TOEFL</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1">Tips and Trick</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1">Cambridge</div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
this is my java script
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>
The casing on your onclick event is wrong. You have onclick="showMenuForm()", but your function name is showMenuform (lowercase "f").
I am trying to attach handler to dynamic created element I am doing this but it isn't work
custom1.js
$(document).ready(function(){
var kart=[];
var found=0;
$(".adTo").on("click",function(){
var name,quantity,price,temp;
name=$(this).parent().children(".name").html().toString();
price=$(this).parent().children(".price").html().toString().substring(2,this.length);
found=0;
temp=kart.length;
for(var i=0;i<kart.length;i++)
{
console.log(kart[i].name);
if((kart[i].name==name))
{
console.log("ni");
kart[i].quantity++;
$(".cartStatus").children("#"+name).children(".quantity").html("Quantity: "+kart[i].quantity);
kart.price=kart.price+parseInt(kart[i].price);
$("#totalCartA").html("Total Amount:"+kart.price);
found=1;
break;
}
}
if(found==0)
{
console.log("ni1");
kart[kart.length]={
"name":name,
"quantity":1,
"price":price
};
$("#cartStatus").append("<div id='"+name+"' class='cartItems mt8'><div class='lf'>"+(temp+1)+"</div><div class='lf mr10'>"+kart[temp].name+"</div><div id='"+name+"' class='reduction rf mr10'>Remove[x]</div><div class='clr bdr'></div><div class='lf quantity'>Quantity: "+kart[temp].quantity+"</div><div class='mr10 rf'>Price: "+kart[temp].price+"</div><div class='clr'></div></div>");
$("#totalCartP").html("Products:"+kart.length);
kart.price=kart.price+parseInt(kart[temp].price);
}
});
$(".reduction").on('click',function(){
console.log('nitin');
console.log($(this));
$(this).parent().remove();
kart.splice(temp, 1);
regenKart(1,temp);
});
function regenKart(howMany, indexFrm){
for(var i=indexFrm; i<(kart.length );i++)
{
kart[i].index=kart[i].index-howMany;
console.log('a');
}
}
});
and this is my view page...
<!DOCTYPE html>
<html>
<head>
<!--script src="/js/jquery.min.js"></script-->
<link rel="stylesheet" href="/css/ekart/style.css" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">EKART</div>
<ul class="menuLinks">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
<div class="clr"></div>
</div>
<!--div class="welComeBar">
<div class="lf mt5">
Welcome Shopper name
</div>
<div class="rf mt5">
<a class="logout" href="javascript:void(0);">Logout</a>
</div>
<div class="clr"></div>
</div-->
<div class="seacrhBar">
<div class="mt5">
<form id="user" action="/do/ekart/userindex/searchproduct/" method="POST" enctype="multipart/form-data">
<select name="category" name="category" id="category">
<option value="">Select your category...</option-->
<?php
foreach($result as $row)
{
echo "<option value='".$row['cat_name']."'> ".$row['cat_name']." </option>";
}
?></select>
<input type="text" value="" name="product" placeholder="Enter Product Name" />
<input type="submit" value="GO" />
</form>
</div>
<div class="clr"></div>
</div>
<div class="mainBody">
<div class="itemWrapper" style= <?php $visible="";echo "'display:".$visible.";'"?> >
<?php foreach($products as $row) { ?>
<div class="itemS">
<div class="name"><?php echo $row['Pro_name'];?></div>
<div class="image"><img src="data:image/jpeg;base64,<?php echo base64_encode($row['image']);?>" alt="No photo" height="100" width='145'/> </div>
<div class="price">Rs <?php echo $row['cost'];?></div>
<a class="adTo" href="javascript:void(0);">Add To Cart</a>
</div>
<?php }?>
</div>
<div id="cartStatus" class="cartStatus">
<div class="yourCart mt8">Your Cart</div>
<div class="yourCart mt8" id="totalCart"><span id="totalCartP">Products:0</span><span class="rf" id="totalCartA">Total Amount: 0</span></div>
<div class="cartStatus1"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
X </ul>
<div class="clr"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/custom1.js"></script>
</body>
</html>
I am dynamically creating a division cartItems in which there is a subdivision with tag remove i want that when this tag is clicked the cartItem is automatically removed from cart list. I have assign reduction as class name to this division but found myself unable to attach this division with handler using this class name.I have also print "nitin" on console inside this handler to check weather handler is attached with remove tag or not but nothing gets printed on console.I dont know what to do now..
When using on() for dynamic elements, the syntax is
$("#cartStatus").on('click', '.reduction', function() { ...
where you pass in an element that exists at the time of binding the event, and where the second argument after the event is the selector to filter on.