Hi I'm trying to make a simple zodiac webpage that grabs the answer from an array using a function that has a for loop and an if statement, but the answer when I click the button continues to just flash and disappear. How do I keep the answer on the page?
Here's the HTML:
<div class="header"><h1 class="zodiactitle">Learn your Life's Mysteries w/ the </br>ZODIAC</h1></div>
<form>
<input id="zodiac" placeholder=" ENTER YOUR ZODIAC">
<span class="click"><button class="button" onclick="getZodiac()">Click to find out more</button></span>
</form>
<div class="details">
<h3 id="birthdate"></h3>
<h3 id="zodiacsign"></h3>
</div>
Here's the function:
function getZodiac(){
var sign = document.getElementById("zodiac").value;
for( i = 0; i < zodiacSigns.length; i++){
//if statement to match correct input to correct zodiac
if(sign == zodiacSigns[i].sign){
document.getElementById("birthdate").innerHTML = zodiacSigns[i].birthdate;
document.getElementById("zodiacsign").innerHTML = zodiacSigns[i].zodiac;
return;
}
}
}
Hey I think the problem is that when you click the button, your form is being submitted and your page flashes. You can add Event.preventDefault() and Event.stopPropagation() to fix it. I made a demo for more clarity.
function getZodiac(e) {
e.preventDefault();
e.stopPropagation();
// the rest of your logic
}
Related
I'm trying to create 3 divs that are hidden when the page load, so that when I click their respective buttons they show up, however, no matter what I do, I cannot get them to show up with the button click.
Here is the relevant part of the code:
My div and button:
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
And the JS used to show it:
function TestsFunction() {
var T = document.getElementById("TestsDiv");
T.style.display = "none";}
I can successfully hide the div when I load the page, however after I click the button it doesn't show up again.
I tried
window.onload = function(){
document.getElementById('TestsDiv').style.display = 'none';
}
Instead of style="display:none" on the div to see if the way I hid it was the problem, but the div still wouldn't show up.
I'm a beginner and I'm not good with JS, HTML or PHP, if possible can someone both help and explain my mistake? Do I need something else in my code? I tried reading similar threads but the solutions were all too complicated for my understanding and I ended up not being able to fix my problem. Thank you!
You need to set display to block (or something else) but not hide when button is clicked!
function TestsFunction() {
var T = document.getElementById("TestsDiv");
T.style.display = "block"; // <-- Set it to block
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
try
function TestsFunction() { TestsDiv.style.display = 'block' }
function TestsFunction() { TestsDiv.style.display = 'block' }
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
You need to adapt your function to toggle the display of the div. Currently it is only hiding it - but if its already hidden, remove the display = "none" to show it again. You remove it by setting the display style to an empty string (which makes it default).
function TestsFunction() {
var T = document.getElementById("TestsDiv"),
displayValue = "";
if (T.style.display == "")
displayValue = "none";
T.style.display = displayValue;
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
If you only want it to be shown, and not to be able toggle display on and off, just set it to the empty string right away.
function TestsFunction() {
document.getElementById("TestsDiv").style.display = "";
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
You should look into jQuery's hide() and show() methods. They take care of setting the styles for you.
https://www.w3schools.com/jquery/jquery_hide_show.asp
do like this =>
function TestsFunction(){
$("#TestsDiv").css("display","block")
}
before that you should include jquery cdn.
thank you.
I have an existing app which requires a user to answer questions using an input box. I did not code this app and I do not want to mess around with the apps code. I have created a virtual on screen numpad from buttons which when pressed add the corresponding value to the input box using '.value'. This does 'work' and the numbers do appear in the input box but they are not saved by the existing code meaning that they mustn't be capturing the '.value'.
Is there some easy way of essentially.. simulating a user inputting text
function geet (clicked_value) {
var input = document.querySelector(".pt-subpage-current input");
if (input.value.length < 3) {
input.value += clicked_value;
}
}
function removeValue() {
var input = document.querySelector(".pt-subpage-current input");
var length = input.value.length;
if (length > 0) {
input.value = input.value.substring(0, length-1);
}
}
<input type="button" onClick="geet(this.value)" value="7" class="button
number" id="num7" />
You can use div with content editable true ,if that works for you.This is for your simulating part in your question
function edit()
{
let te=document.getElementById("textdiv").textContent;
console.log(te)
}
<div id="textdiv" contenteditable="true">Hello, edit me!</div>
<button onclick="edit()">Button</button>
I literally just made a numpad for someone here. all you need to do is use the showKeyPad() in an onclick event and give the fields id's. Let me know if you need help.
EDIT: Sorry just realized you said it is not saving .value.
This keypad uses the .value.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Below is my html and javascript. The Js is located in a app.js file and the html is a yes or no question. At the bottom of the javascript I have code that should fire on click events. Right now it is just to see if it detects a click on the p elements in the html but hasn't worked so far.
Can anyone detect why this event isnt taking place?
The other jQuery int he code does work but this jQuery isnt invoked by a function and is invoked based of strictly using a selector which leads me to believe there is something wrong with how I used document.ready in my project.
Html:
<div class="question animated slideInUp">
<h3>Do you know your individual monthly rent cost?</h3>
<div class="rentanswer">
<p>Yes</p><p>No</p>
</div>
<!--
<p>If not, we'll get the average rent of a zip code for you from Zillow</p>
<form onsubmit="Obj(this.p.name,this.p.value)">
<input type="number" id="p" name="rent" placeholder="Leave blank if N/A" >
<input id="s" type="submit" value="Submit">
</form>
-->
</div>
Javascript:
var quest = ['../partials/income.hbs', '../partials/state.hbs', '../partials/rent.hbs', '../partials/zip.hbs', '../partials/roomate.hbs', "../partials/summary.hbs"];
var iterator = 0;
//creates object that gets sent to api
function Obj(name, vale){
event.preventDefault(); //prevents pg refresh
$('.form').load(quest[iterator], function () {
$('.bar p#' + name).css("border","2px solid black").addClass('enter').next().css({"border":"2px solid black","pointer-events":"auto","cursor":"pointer"});
});
//loads next html question to page
if(name){
data[name] = vale;
}
//move array accessor up to next question
iterator++;
console.log(data);
}
var data = {};
//user can click already submitted values to load that orignal question and change it/
function redo(q, id) {
q = Number(q);
//if the current queston on the page is not the one being clicked we then change it to the one being clicked
if (q + 1 != iterator) {
$('.form').load(quest[q], function () {
$('#p').val(data[id]);
});
iterator = q + 1;
};
};
$(document).ready(function(){
$('.rentanswer p').on('click',function(){
console.log('hey');
});
});
Here you go with a solution https://jsfiddle.net/g8xt5g4y/
$(document).ready(function(){
$(document).on('click','.rentanswer p',function(){
console.log($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Do you know your individual monthly rent cost?</h3>
<div class="rentanswer">
<p>Yes</p>
<p>No</p>
</div>
I believe your HTML is getting rendered dynamically, that's why your click method isn't working.
Try event delegate (mentioned in th above code).
Hope this will help you.
I have 5 buttons 'Free call' on my site. On hover on them pops up contact form. I have a number of problems with it:
How to make the form be the only one on the page? I mean, from different buttons must be shown the same form. (For ex. I filled in the form in one place and when I hover other button, I see message 'You're done' or smth like that)
How to make the showing function work only once for every button? (The code below)
I tried to solve this problems but my methods didn't work
HTML
I have 5 such buttons on the page in different places
function showForm() {
var currentButton = $(this);
if ( currentButton.find('.popover-form') !== undefined ) {
var freeCallForm = "<form class=\"popover-form free-call-form\"><label for=\"\">Name</label><input type=\"text\"> <label for=\"\">Phonenum</label><input type=\"text\" value=\"+375\"><button>Call me!</button> </form>";
currentButton.append(freeCallForm);
}
}
$('.main-btn').on('mouseover', showForm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main-btn free-call">
<p>Use free call
<br/>
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
This function above unfortunately doesn't work. With if I tried to make function work only when .main-btn hasn't .popover-form.
And other problem is that on hover on different buttons anyway appends NEW form for every button. I can't find correct solution for this problem.
var isOpen = false;
function showForm() {
var currentButton = $(this);
if ( currentButton.find('.popover-form') !== undefined && !isOpen) {
var freeCallForm = "<form class=\"popover-form free-call-form\"><label for=\"\">Name</label><input type=\"text\"> <label for=\"\">Phonenum</label><input type=\"text\" value=\"+375\"><button>Call me!</button> </form>";
isOpen = true;
currentButton.append(freeCallForm);
}
}
$('.main-btn').on('mouseover', showForm);
//on modal close set isOpen back to false
The solution is the append() method. It moves DOM elements, not copies them (I thought so).
So I inserted my <form id="free-call-form"> to the end of the document, before </body>.
JS
function showForm() {
var currentButton = $(this);
if ( ( currentButton.find('.popover-form') !== undefined && !currentButton.existsFreeCall ) ) {
var freeCallForm = $('#free-call-form');
currentButton.append(freeCallForm);
currentButton.existsFreeCall = true;
}
}
$('.main-btn').on('mouseover', showForm);
In this code the same form moves from one to another button without copying and multiple appending.
I'm having some trouble getting my code to do what I want. I have multiple sections that I have set to toggle show/hide, and it functions correctly. However, I'm now trying to switch the images to where instead of always being static with "More," I'd like it to switch to "Less" when it's expanded.
It does work... but only for the first one. If I press the buttons on any of the others, it only changes just the first one. You can see the page here:
http://jfaq.us
I've tried several different solutions with variables, but I can't seem to get it to work.
Help? Thanks in advance!
function changeImage() {
if (document.getElementById("moreorless").src == "http://jfaq.us/more.png")
{
document.getElementById("moreorless").src = "http://jfaq.us/less.png";
}
else
{
document.getElementById("moreorless").src = "http://jfaq.us/more.png";
}
}
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none")
{
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
<div>
Guestbook
<div>
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para3')" >
</div>
<div id="para3" style="display:none">
This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.
</div>
About
<div>
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para2')" >
</div>
<div id="para2" style="display:none">
This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.
</div>
</div>
The id attribute must be unique. That's why it's not working. Also, it's not a good idea to use inline event handlers like you are doing, you should register event handlers using addEventListener instead.
Without changing all your code, one thing you can do is pass a reference to the currently clicked element to the changeImage function.
function changeImage(el) {
var moreUrl = 'http://jfaq.us/more.png';
el.src = el.src === moreUrl? 'http://jfaq.us/less.png' : moreUrl;
}
Then change the inline handler for onclick="changeImage(this);"
You are using same Id for all inputs. This is causing the problem.
Give every element a unique Id.
If you want to perform grp operation use jquery class.
That's because you use the same id for the both images, and getElementById apparently takes the first one.
Here is the updated code:
html:
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage.call(this);return toggleMe('para3')" >
script:
// inside the event handler 'this' refers to the element clicked
function changeImage() {
if (this.src == "http://jfaq.us/more.png") {
this.src = "http://jfaq.us/less.png";
} else {
this.src = "http://jfaq.us/more.png";
}
}
check this
http://jsfiddle.net/Asb5A/3/
function changeImage(ele) {
if (ele.src == "http://jfaq.us/more.png")
{
ele.src = "http://jfaq.us/less.png";
}
else
{
ele.src = "http://jfaq.us/more.png";
}
}
<input type="image" src="http://jfaq.us/more.png" onclick="changeImage(this);return toggleMe('para3')" >