I am making a quiz game and I was wondering how I can make the proceed button appear. it goes from the user typing the right answer, displaying a nice good jobs sort of message, then at the same time a button pops up saying that the user can proceed. could someone help?
Image Of The Code Click Here
Use these methods -
function show_button(id){
document.getElementById(id).style.display = "block";
}
function hide_button (id){
document.getElementById(id).style.display = "none";
}
if the user enters the correct answer then call
hide_button(id of the html element);
you can display messages informing that user had entered the correct answer or not by making use of javascript and accessing the CSS stuff with javascript.
document.getElementById(id).style returns you a css object.
you can modify CSS (style, margin, padding, color) of the HTML elements using javascipt to create a dynamic webpage.
If you want to use jquery the code is:
$(document).ready(function(){
var input = ("#the.id.of.your.input").val();
var result = "The result";
if(input == result){
$("#id.of.your.button").fadeIn();
// or: ("#id.of.your.button").show();
}
});
Related
I am trying to write a simple script which follows the logic below but I am having difficulties.
If "Name" field = blank
Then Hide "Comment" field
Else Show "Comment" field
$(document).ready(function() {
if ($('#ContactForm-name').value() == "") {
$('#ContactForm-body').hide();
} else {
$('#ContactForm-body').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Can someone please help me? I provided a screen shot of the form and its HTML.
The shopify store is https://permaink.myshopify.com/pages/contact with the store PW = "help".
Taking a look at the example link you provided w/ 'help' password, it doesn't look like jQuery is actually loaded on the site, after running the following in console: console.log(typeof window.jQuery) returns undefined.
You may need to use vanilla JS to achieve what you're trying to do (or side load jQuery, if you have permissions to do so and really need to use it).
Using JS without jQuery, you can try doing something like:
window.addEventListener('load', function() {
if (document.getElementById('ContactForm-name').value === '') {
document.getElementById('ContactForm-body').style.display = 'none';
} else {
document.getElementById('ContactForm-body').style.display = 'block';
}
});
Note, that just hiding the ContactForm-body textarea will still leave a border outline and the label Comment showing, so you may need to do more than just hiding the textarea (find the parent <div> in JS and hide whole block).
Example of what I want
Excuse my noobness.
I want an input field that disappears when there's been input. (Like the '3' in the example.)
I want the input field to return if I want to edit the input.
I've looked up online on how to do this and how to go around it, but I don't get anything useful out of it.
I have tried something like this (old, irrelevant code, it's just an example of what I tried to do):
function addButtonActions() {
questionsButton.addEventListener("click", function () {
var page = document.getElementById('page-questions');
hideAllPages();
page.style.display = 'block';
});
function hideAllPages() {
var startPage = document.getElementById('page-start');
var questionsPage = document.getElementById('page-questions');
var scorePage = document.getElementById('page-score');
startPage.style.display = 'none';
questionsPage.style.display = 'none';
scorePage.style.display = 'none';
}
But it didn't seem to work for the input field.
I don't use <form></form>, because that always seems to give me bugs. Something like <form></form> doesn't help my layout for the page anyway, I don't think.
First of all: Example of using FORM
Your problem is in the JavaScript. Your calling hide, then behind it calling BLOCK which unhides it.
hideAllPages();
page.style.display = 'block';
Also, what is questionsButton? That needs to be an object variable.
I'm currently working on a website which has a search engine including advanced search options with filters. I want to hide the filters until a category has been chosen. I'm not sure if that script would even work within the php file, because I also tried the script with simple alerts but it didn't work. I positioned this script at the end of the php file of the advanced search options.
<script>
if (document.getElementById("main_cat").value == "-1")
{
document.getElementById("custom_fields").style.display = "none";
}
else
{
document.getElementById("custom_fields").style.display = "inline";
}
</script>
custom_fields is the id of a div container which displays all the filters with php generated content. main_cat is the id of the category, if the value is -1, no category is chosen.
I'm working on a website with wordpress if that is important to know.
Thanks for your help!
I think you have a minor semantic error that's causing your script to not function as expected. Also, to achieve the functional behaviour for the <select> you will need to do a few extra things, namely, to listen to the change event:
<script>
// Store variables to elements we want to work with
var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")
// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";
// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {
if (mainCat.value == "-1")
{
customFields.style.display = "none";
}
else
{
customFields.style.display = "inline";
}
})
</script>
As a final note, I saw that the script was actually commented out on your website. Just below the <!--Script Custom Fields-->, the script was enclosed in /* ... */ - remove those to ensure that the script does run, rather than be ignored by the browser.
Hope this helps!
I have been trying to get a checkbox to be checked once a user clicks on another field however unable to get any further.
Here is the javascript I am using at the moment
document.getElementById("Freelance_Sig").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("Freelance_Sig").innerHTML = document.myform.Freelance_signed.checked = true;
}
As my form is not html i wonder if thats the issue.
Any help would be appreciated, thank you.
My original answer was for interacting with HTML. You'll need to use something a little different for use with PDF.
Something like this should work:
this.getField('Freelance_Sig').onclick = function() { myFunction(); }
function myFunction() {
this.getField('Freelance_signed').value = 'On';
}
There are some good resources on using javascript with PDFs here:
Basic PDF JavaScripting
Getting and setting checkbox values in a PDF
Hope that helps!
I have the follow simple code for a confirm box
<!DOCTYPE html>
<html>
<body>
<p>Click the button to alert the hostname of the current URL.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
confirm("Confirm!!!!");
}
</script>
</body>
</html>
but my problem is I want with css to style the OK and Cancel button with a very simple way. I'm looking for a real simple solution.
This question has been asked more:
How to style default confirm box with only css?
confirm box styling
Answer; you can NOT style the confirm() function it's dialog box since it's browser generic.
You will have to search for alternatives like these:
jQuery Boxy: onehackoranother.com/projects/jquery/boxy/
jQuery Dialog: jqueryui.com/dialog/#modal-confirmation
You could also try to create your own dialog box. Which is not quite simple as you asked for. However, lot's of tutorials can be found:
Tutorial 1: www.developphp.com/view.php?tid=1385
Tutorial 2: tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
(Sorry, as a beginner I'm not allowed to place more links)
alert and confirm are built-in to JavaScript and STOP page execution until they are answered, which is what allows you to do:
if( confirm('do you want to see this?') ) {
//show them.
}
Any confirm() solution that you work-up that can be styled won't be able to be included in an if statement. If you want code to only execute when the confirm is clicked, then you need to make that code as a callback, which make the above code look more like this:
mySpecialConfirm('do you want to see this?', function() {
//show them
} );
Then, you have to wire that function call into the "ok" button click on the confirm dialog that you create. This means that it's inherently more complicated just from a coding standpoint not to mention the code that has to wire that up to an HTML form. I would say that it's not worth it to re-invent the wheel and make your own modal. This means that you need to choose jQuery and jQuery UI, or jQuery and Bootstrap, or Dojo Toolkit, etc., and then from there look for the solution that they have for doing this, or use their modals.
As far as I know, you can't change the style of native pop up windows, but you can create your own with a bit of JavaScript trickery.
function promptWindow() {
// Create template
var box = document.createElement("div");
var cancel = document.createElement("button");
cancel.innerHTML = "Cancel";
cancel.onclick = function() { document.body.removeChild(this.parentNode) }
var text = document.createTextNode("Please enter a message!");
var input = document.createElement("textarea");
box.appendChild(text);
box.appendChild(input);
box.appendChild(cancel);
// Style box
box.style.position = "absolute";
box.style.width = "400px";
box.style.height = "300px";
// Center box.
box.style.left = (window.innerWidth / 2) -100;
box.style.top = "100px";
// Append box to body
document.body.appendChild(box);
}
After calling promptWindow you have your own pop up box, which you are free to style!
Hope this helped!