Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Here is my code:
function ayee() {
confirm("Ready to play?");
var age = prompt("How old are you?"),
replacement = document.getElementById('container'),
message;
if (age >= 18) {
message = "Let's get started!" ;
} else {
message = "You're under 18? Be careful out there....";
}
replacement.innerHTML = message ;
}
What I want to do is in the return if age is greater then 18, add a button along with the message(or containing the message) that on click will send into the next function.
PS: this is for a choose your own adventure game.
try this
replacement.innerHTML = message+"<button>Next</button>"
var s = replacement.getElementsByTagName("button")[0];
s.addEventListener("click",function() {alert("next");}) // change the function to
// suit your needs
The idea is innerHTML creates the DOM. You can then use normal JavaScript function getElementsByTagName to get the button inside your replacement
Then add an event listener on the click of the button using addEventListener
This will work only on modern browsers. To make it work in IE prior to IE9 please add the following code. See the following link for more details
if(s.addEventListener)
s.addEventListener("click",myFunction);
else if (s.attachEvent)
s.attachEvent("click", myFunction);
fiddle
Write your function with some param
function myfunction(message){
//do something with message
}
and change message = "Let's get started!" ; to myfunction('Let's get started!')
Do something like this:
var btn = document.createElement("button");
btn.value = "Begin";
if (age >= 18) {
btn.addEventListener("click", function() {
eighteen();
});
}
else {
btn.addEventListener("click", function() {
notEighteen();
});
}
container.appendChild(btn):
You could also call one generic function that checks the age and runs two different sections of code instead of adding event listeners for two different functions.
Just a note: when you declare a variable, you should place "var" behind it. (var a = "test";.)
attach a button, alongside your html to be displayed, and add a click handler to the button with the function you want to trigger when the button is clicked, for example a simple code can be like:
function ayee() {
confirm("Ready to play?");
var age = prompt("How old are you?"),
replacement = document.getElementById('container'),
message;
if (age >= 18) {
//create a button
var btn = "<input type='button' name='test' onclick='checkThis();' value='Click'>";
//add the button to the message
message = "Let's get started!" + btn ;
} else {
message = "You're under 18? Be careful out there....";
}
replacement.innerHTML = message ;
}
function checkThis() {
alert("Clicked the button");
}
Related
I have JavaScript code that is supposed to add input boxes to my html and then save the user input into and array. When I run my code regularly the screen refreshes and nothing happens. If I run it a second time it works how it should. Similarly if I open up debug mode and put a break point in the code works just fine the first time I try to run it. Is there an asynchronous issue I'm not aware of?
Also the event listener is checking for when someone hits the enter key on the web page otherwise the code doesn't execute.
Also, I'm new to stack overflow I've found the help so far great and if I'm not doing something in proper etiquette of asking a question please let me know!
var recipients = document.getElementById("howMany");
recipients.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
validate(e);
}
})
function validate(e) {
var num2 = document.getElementById("howMany");
num2 = document.getElementById("howMany").value;
var values = new Array();
for (i = 1; i < num2; i++){
//loop set to repeat to the amount of guests inputed by user
container.appendChild(document.createTextNode("Recipient " + (i+1)+":"));
//creates a text for the user to read which recipient each input is for
var x = document.createElement("input");
//creates the input element
x.setAttribute("id", "empInput"+i);
x.setAttribute("type", "text");
x.setAttribute("value", "");
//sets the type and attribute
container.appendChild(x);
//places the input element in the container
values[i] = document.getElementById("empInput"+i).value;
}
//console.log(values);
}
Im trying to figure out how to in wordpress display only first two comments and hide rest and add button that reveal all these hidden messages if needed. Pagination give me only two msg per page and thats not im looking for. Can someone give me an idea how I can this achieve or point me to articles about this?
Thanks
here is a plugin that should do the job: https://wordpress.org/plugins/comment-load-more/
It is a bit outdated (3 years ago) so you should check if the code is still valid and compatible.
In " Settings > Comment Load" you should be able to set the number of desired comments to show first.
Indeed, in this guide - http://www.wpbeginner.com/plugins/how-to-easily-lazy-load-comments-in-wordpress/ - you will find how to lazy load all comments. Probably, with some modification, you can adapt it to your need as well.
Cheers!
// This function hide comments if is there more than two and add show more button
function fds_comments () {
var commentWrap = document.getElementById('comment-list');
var commentChilderns = commentWrap.children;
for (var i = 2; i < commentChilderns.length; i++) {
commentChilderns[i].style.display = "none";
}
commentWrap.innerHTML = commentWrap.innerHTML + "<button id='more-comments' onclick='fds_all_comments()'type='button' >Show all comments</button>";
}
//This function reveal all comments (used on SHOW MORE btn)
function fds_all_comments(){
var commentWrap = document.getElementById('comment-list');
var commentChilderns = commentWrap.children;
for (var i = 0; i < commentChilderns.length; i++) {
commentChilderns[i].style.display = "block";
}
}
// problem: comments hidden after submit
// solved: This additional code reveal comments after SUBMIT
window.onload = function() {
var reloading = sessionStorage.getItem("reloading");
if (reloading) {
sessionStorage.removeItem("reloading");
fds_all_comments();
}
}
// function used on SUBMIT button
function fds_all_on_submit(){
sessionStorage.setItem("reloading", "true");
document.location.reload();
}
I have a simple checkbox.
<div class="myCheckBox"><label><input type="checkbox" checked><span class="label-text">My Label</span></label></div>
Note: The HTML is part of a stack that already has a unique ID assigned to it (referenced the the JS as %id%.
I want to connect it to a javascript function. I know I can use onClick in the HTML to achieve this, but in this use case I need an event handler in my javascript to call (correct term?) the function.
My JS is
$(document).ready(function() {
var stack = $('%id%'),
checkbox = $('.myCheckbox',stack);
function filterCheck(%id=filterName%, %id=values%) {
var sheet = mainViz.getWorkbook().getActiveSheet();
var updateType;
if(checkbox.is(":checked")) {
updateType = "ADD";
} else {
updateType = "REMOVE";
}
worksheetArray = sheet.getWorksheets();
for (var i = 0; i < worksheetArray.length; i++) {
worksheetArray[i].applyFilterAsync(filterName, values, updateType);
}
}
}
checkbox.click(function(e) {
}
});
The event handler (I assume) goes after the checkbox.click(function(e) { ...but I am at a moment of clueless loss. Help?
I could see one issue with the code.
var stack = $('%id%'),
checkbox = $('.myCheckbox',stack);
You are not using # to reference id of element. Correct way should be either escaping the special characters
var stack = $('#\\%id\\%')
or by wrapping up dom object with jQuery Wrapper
var stack = $(document.getElementById('%id%'))
Both will help to find the stack which you have used as context below
$('.myCheckbox',stack);
event handler should work fine as given.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Okay right, Ajax. But is there any other solution besides ajax. You cannot really make a font-awesome icon a button or can you? If you have no clue what I am talking about when I mean a font-awesome icon this is what I mean:
<i id="like1" onClick="like(this);" class="fa fa-thumbs-o-up">5</i>
So back on topic. I want to make it as soon as you click on this icon it runs a php script which adds a +1 to a text file, but how would you run that without using ajax and without refreshing the page. The site I am working on is a random youtube video site where people will be able to rate videos. I want to save when someone clicks the thumbs up button but I cannot refresh the page or else it goes to another random video. Now you see my issue. However if it is not possible to do without ajax then please explain the ajax solution, I do not have enough experience with ajax to do it on my own. Heres some code that I've already done.
JS:
<script>
function like(obj) {
if (obj.style.color === "green") {
// set obj color to something other than green
obj.style.color = "white";
// get the innerText for the object that was clicked, parse as int, decrement by 1
obj.innerText = parseInt(obj.innerText) - 1;
}
else {
// we are incrementing, so check the dislike and decrement if necessary
var dislike = document.getElementById("dislike1");
if (dislike.style.color === 'red') {
dislike.style.color = 'white';
dislike.innerText = parseInt(dislike.innerText) - 1;
}
// set the colour of the object that was clicked
obj.style.color = "green";
// get the innerText for the object that was clicked, parse as int, and increment by 1
obj.innerText = parseInt(obj.innerText) + 1;
}
}
</script>
<script>
function dislike(obj) {
if (obj.style.color === "red") {
// set obj color to something other than green
obj.style.color = "white";
// get the innerText for the object that was clicked, parse as int, decrement by 1
obj.innerText = parseInt(obj.innerText) - 1;
}
else {
// we are incrementing, so check the dislike and decrement if necessary
var like = document.getElementById("like1");
if (like.style.color === 'green') {
like.style.color = 'white';
like.innerText = parseInt(like.innerText) - 1;
}
// set the colour of the object that was clicked
obj.style.color = "red";
// get the innerText for the object that was clicked, parse as int, and increment by 1
obj.innerText = parseInt(obj.innerText) + 1;
}
}
</script>
Dislike & like buttons:
<strong><i id="like1" onClick="like(this);" class="fa fa-thumbs-o-up">5</i>
<i id="dislike1" onClick="dislike(this);" class="fa fa-thumbs-o-down">1</i> <br/></strong>
EDIT:
Is this correct?
<script>
function like(obj) {
var jqxhr = $.ajax(
type: "POST",
url: "liketest.php", //Name of your current file name
data: shareline //Here pass some parameters. Detect it in your php file before proceeding furthur. These parameters are available in post global variable when you send an ajax call.
)
.done(function(msg ) {
echo "Ajax seems fine";
})
.fail(function() {
echo "Failed";
})
});
if (obj.style.color === "green") {
// set obj color to something other than green
obj.style.color = "white";
// get the innerText for the object that was clicked, parse as int, decrement by 1
obj.innerText = parseInt(obj.innerText) - 1;
}
else {
// we are incrementing, so check the dislike and decrement if necessary
var dislike = document.getElementById("dislike1");
if (dislike.style.color === 'red') {
dislike.style.color = 'white';
dislike.innerText = parseInt(dislike.innerText) - 1;
}
// set the colour of the object that was clicked
obj.style.color = "green";
// get the innerText for the object that was clicked, parse as int, and increment by 1
obj.innerText = parseInt(obj.innerText) + 1;
}
}
</script>
No you can not execute any php script on client computer. PHP is a server side scripting language and its only executable on server side. You have to use ajax function if you don't want to refresh the page.
Use jQuery ajax function to save values in your text file.
You can get more help about ajax function on following website. Following is the syntax for jquery.
var jqxhr = $.ajax(
type: "POST",
url: "pageFileName.php", //Name of your current file name
data: data //Here pass some parameters. Detect it in your php file before proceeding furthur. These parameters are available in post global variable when you send an ajax call.
)
.done(function(msg ) {
// Here you will put the code which will execute after successful ajax call. msg variable contain data which is received from your php script file.
})
.fail(function() {
// Code if ajax call fail
})
});
I have not tried it myself (except in nodejs with Socket.io) but if you don't want to use an ajax call, for some reason, you could maybe try WebSockets.
Short presentation here: MDN WebSockets API
I have a small problem with my javascript code, im trying make a small application with 2 textboxes and 1 textarea. When textbox 1 is filled in you can press enter and then the focus will go to textbox 2. When textbox 2 is filled then the data from textbox 2 will go automaticly to the textarea as somekind of storage. And i fould like it to work with only plain javascript so it could support all the browsers and older browsers like IE 8
I have a massive javascript and every function works but somehow the big picture doesnt work. Can someone help me figure out why my javascript isnt doing what i want. And what i want is explained above.
https://jsfiddle.net/LLfwhL3L/2/
I cleaned the fiddle up fith the jshint functions from jsfiddle and get no erros, but it still doesnt work
These are the functions where i think it goes wrong:
function AddToList() {
var bonregel = document.getElementById("bonregel");
var val = bonregel.value.toString();
if (val != "") {
var box = document.getElementById("bonregelbox");
if (box.value != "")
box.value += "\n";
box.value = box.value + val;
}
bonregel.value = "";
bonregel.focus();
}
var delayrec = [];
function delay(callback, id, calldelay) {
clearTimeout(delayrec[id]);
delayrec[id] = setTimeout(callback, calldelay);
}
function keyup(event) {
var locatiebox = document.getElementById("locatie");
var bonregelbox = document.getElementById("bonregelbox");
var bonregels = bonregelbox.value.split(/\r\n/).join(",");
var locatie = locatiebox.value;
if (event.keyCode == 125)
SubmitContent(locatie, bonregels);
else
delay(AddToList, "AddToList", 500);
}
The working fiddle
https://jsfiddle.net/LLfwhL3L/5/
This is the working fiddle and how it should work, but on my device with IE 8 it doesnt work. The text from textbox 2 isnt goeing into the textaera. How can i solve this?