For some reason my JS on click isn't working. I have the id and class tagged.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type='text/javascript' src="js/index.js"></script>
<script>
$(document).ready(function(){
alert("Hello World");
});
</script>
</head>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
And here's the Javascript.
$(document).ready(function() {
// Only change code below this line.
$("#getMessage").on("click", function(){
$(".message").html("Get message");
});
// Only change code above this line.
});
I'd really appreciate some insight! Thank you very much. My hyphothesis is that the index.js file isn't linking properly but the src is definitely right.
$(document).ready(function() {
$("#getMessage").on("click", function(){
alert('You Clicked..!!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
You are forget to include script, If no you may miss-aligned the script file,Please load it first.
If you intend to use the functionality of a certain library - jQuery in this case - then you have to load this library before you use any of its functionality.
$(document).on("click", "#getMessage", function(){
$(".message").html("Get message");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
You Might be missing the jQuery script file. This works perfect for me.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
alert("Hello World");
});
$(document).ready(function () {
$("#getMessage").on("click", function () {
$(".message").html("Get message");
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class="row text-center">
<div class="col-xs-12 well message">
The message will go here
</div>
</div>
<div class="row text-center">
<div class="col-xs-12">
<button id="getMessage" class="btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
</body>
</html>
Related
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>
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>
When the button is clicked, I want the new reply to be added to the top by update time desc.
For example, I added three replies. New reply 3 should on the top.
I tried two methods. It seems like after the page is loaded, click button function can not obtain the new added html.
$(document).ready(function() {
$('[id ^="submitCommentButton"]').click(function() {
$('#top').append('<div style="background-color:red"> New reply number </div>'); // method 1
// $('<div style="background-color:red> New reply number </div>').insertBefore($('#reply_container').children('.each').first()); // method 2
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
Your code: $('#top').append(' will add the given html to the end of the selected tag.
You need prepend()
$('#top').prepend('<div style="background-color:red"> New reply number </div>');
I think this is what you want:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
<script>
$(document).ready(function() {
$('button').click( function(){
$('#reply1').prepend('<div style="background-color:red"> New reply number </div>');
});
});
</script>
second way to add HTML:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
<script>
$(document).ready(function() {
$('button').click( function(){
$('<div style="background-color:red"> New reply number </div>').insertBefore('#reply1');
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<title>Chat Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="AVAInteractArea" class="col mb-4 bg-dark justify-content-center"
style="max-height: 25rem; overflow-y: auto">
<div class="d-flex justify-content-start mb-4">
<h5>
<span class="badge badge-primary">AVA</span>
Hi, how are you?
</h5>
</div>
<div class="d-flex justify-content-end mb-4">
<h5>
Hi, I am good about you?
<span class="badge badge-secondary">You</span>
</h5>
</div>
<script>
function addDiv(parent_div) {
var div = document.createElement('div');
var parent = document.getElementById(parent_div);
div.innerHTML = '<p>TEST</p>';
parent.appendChild(div);
}
var button = document.getElementById('AVAInteractTypeSubmit');
if (button) {
button.addEventListener('click', function () {
// change dynamically your new div
addDiv('AVAInteractArea');
});
}
</script>
</div>
<form class="col-lg-6 offset-lg-3 mb-5">
<div class="row form-group justify-content-center">
<input id="AVAInteractType" type="text"
placeholder="Ask AVA about law"
class="form-control-lg border-white"
style="outline: none"
autofocus="autofocus">
<button id="AVAInteractTypeSubmit" class="btn-lg btn-primary" style="outline: none">Ask</button>
</div>
<button id="AVAInteractSpeak" class="btn-lg btn-primary" style="outline: none">Or speak to AVA</button>
</form>
</div>
</div>
</div>
</body>
</html>
I am trying to make it so that when I click the button with id="AVAInteractTypeSubmit", it adds a div to the parent div with id="AVAInteractArea". However, whenever I run this code, no such div appears to be added to the parent div. I don't know why it isn't working please help me. I don't want to use jQuery, I just want the Javascript code in the script tag above fixed.
Edit
Thank you #brk for fixing my problem. But now I want to do something different, I want to add everything to a function dedicated to adding the div inside the parent div, so I replaced all the code in the script tag with
function addUserAVAInteraction() {
var div = document.createElement('div');
var parent = document.getElementById('AVAInteractArea');
div.innerHTML = '<div class="d-flex justify-content-end mb-4"><h5>Hi, I am good about you?<span class="badge badge-secondary">You</span></h5></div>';
parent.appendChild(div);
}
And I added a attribute to the button, onclick="addUserAVAInteraction()". Whenever I click the button with id="AVAInteractTypeSubmit", it adds the div to the parent div but only for a second, then it immediately goes away. I need it like how it was working with #brk's solution, please help.
Default button type is submit. So on clicking the button it is refreshing. Add event.preventDefault
function addDiv(parent_div) {
var div = document.createElement('div');
var parent = document.getElementById(parent_div);
div.innerHTML = '<p>TEST</p>';
parent.appendChild(div);
}
var button = document.getElementById('AVAInteractTypeSubmit');
if (button) {
button.addEventListener('click', function(e) {
e.preventDefault();
// change dynamically your new div
addDiv('AVAInteractArea');
});
}
<div class="container">
<div class="row">
<div class="col">
<div id="AVAInteractArea" class="col mb-4 bg-dark justify-content-center" style="max-height: 25rem; overflow-y: auto">
<div class="d-flex justify-content-start mb-4">
<h5>
<span class="badge badge-primary">AVA</span> Hi, how are you?
</h5>
</div>
<div class="d-flex justify-content-end mb-4">
<h5>
Hi, I am good about you?
<span class="badge badge-secondary">You</span>
</h5>
</div>
</div>
<form class="col-lg-6 offset-lg-3 mb-5">
<div class="row form-group justify-content-center">
<input id="AVAInteractType" type="text" placeholder="Ask AVA about law" class="form-control-lg border-white" style="outline: none" autofocus="autofocus">
<button id="AVAInteractTypeSubmit" class="btn-lg btn-primary" style="outline: none">Ask</button>
</div>
<button id="AVAInteractSpeak" class="btn-lg btn-primary" style="outline: none">Or speak to AVA</button>
</form>
</div>
</div>
</div>
This is probably a simple task for you Jquery Guru's but I am really battling to do this.
I have two links and I want them to hide and show two forms.
Initially both forms must be hidden, and when you click on button 1 it must show form 1 and when you click the same button again, it must hide form 1. However if Form 1 is shown, and you click on BTN 2 it must hide Form 1 and show Form 2 and similarly if Form 2 is shown, and you click on BTN 2 again it must hide Form 2.
Sort of like Toggling between the two forms but being able to also hide the other form is if it visible.
This is as far as I have gotten. But it is not working like I want, and moreover it seems to be conflicting with the scripts on Bootstrap 4.
$(document).ready(function() {
$("#btn1").click(function() {
$("#form1").toggle(300);
$("#form2").hide(300);
});
$("#btn2").click(function() {
$("#form2").toggle(300);
$("#form1").hide(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Btn 1
Btn 2
<div id="form1" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 1</h4>
</div>
</div>
<div id="form2" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 2</h4>
</div>
</div>
I also tried this. This works by changing between the forms, but if a form is opened, clicking the same button doesnt close (toggle) the form. By the way, this script works in Bootstrap 4.
$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>
Simply change the css() function to toggle() function. css() function will not toggle.
$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages #" + id + "").toggle();
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages #" + id + "").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>