On my web app, I have a screen that expects a user to use a bar-code scanner to scan an item number in, but in the event they do not have one (or the code won't scan) they can click on the notification that asks them to scan and it changes to a box allowing them to enter the details to search manually.
The issue is, the event listener seems to get applied to the close button, it gets removed from the div but the close button seems to call the "open search box" function instead of the "close search box" function
I tried using the jQuery $('#id').one('click' function(){myFunctionHere();}); function to add an event listener on click of the DIV and also tried using $('#id').on('click' function(){myFunctionHere();}); and $('#id').off('click'); but I have the same issue.
See the jsfiddle
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
#tnt-searchScan{
width: 300px;
height: 100px;
border: 5px dashed red;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$('#tnt-searchScan').one('click', function(){showSearchBox();});
})
function closeSearchBox(){
var html = '<h4>Scan barcode</h4><h4>or click here to search</h4>';
$('#tnt-searchScan').html(html).one('click', function(){showSearchBox();});
}
function showSearchBox(){
console.log('test');
var html = 'Content of search box<button type="button" id="tnt-closeSearchBox">Close</button>';
$('#tnt-searchScan').html(html);
$('#tnt-closeSearchBox').one('click', function(){closeSearchBox();});
}
</script>
</head>
<body>
<div id="tnt-searchScan"><h4>Scan barcode</h4><h4>or click here to search</h4></div><div id="tnt-mainPage"><div class="loader"></div> </div>
</body>
I expect the box to return back to normal, but it does not, if you check the console, every time you click 'Close' "test" appears, signalling that the show function is called. if i call the "closeSearchBox();" manually it works fine.
You need to make some changes in your js. First of all .one is changed to .on second need to change the close function click event because the search form is added with js to dom so you need to fire click event on it like this $(document).on('click','#tnt-closeSearchBox', function(){ closeSearchBox(); });.
$(document).ready(function(){
$('#tnt-searchScan').on('click', function(){showSearchBox();});
})
function closeSearchBox(){
var html = '<h4>Scan barcode</h4><h4>or click here to search</h4>';
$('#tnt-searchScan').html(html).on('click', function(){showSearchBox();});
}
function showSearchBox(){
//console.log('test');
var html = '<label>Search By: <select id="tnt-searchOption">' +
'<option selected>ID</option>' +
'<option>Legacy ID</option>' +
'</select></label>' +
'<label>Search: <input type="text" id="tnt-searchBox"></label>' +
'<button type="button">Search</button><button type="button" id="tnt-closeSearchBox">Close</button>';
$('#tnt-searchScan').html(html);
}
$(document).on('click','#tnt-closeSearchBox', function(){closeSearchBox();});
#tnt-searchScan{
width: 300px;
height: 100px;
border: 5px dashed red;
text-align: center;
}
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="tnt-searchScan"><h4>Scan barcode</h4><h4>or click here to search</h4></div><div id="tnt-mainPage"><div class="loader"></div> </div>
</body>
Related
I am working on a project and I am having difficulty writing out the code I need to make the ball in my project change to the same color as the button in the top left hand corner when I change the color. I need them to be in sync. A few things to keep in mind this is without jquery pure vanilla javascript and ecma 5
With that being said here are the instructions for the project:
Use Javascript form events to adjust the background colour of a circle on the screen.
Fork this repository.
**Make a <form> tag with an <input> inside it—use type="color" for the input.
When the form’s change event fires, adjust the background-color of the ball to match the input’s value.
Run it through Markbot and make sure it passes all the checks.
Here is what my project currently looks like:
When I click on the button in the top left hand corner this pops up:
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>CircleColourr</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="ball"></div>
</body>
<script src="jquery.min.js"></script>
<script src="main.js"></script>
</html>
Here is my main.css
html{
box-sizing: border-box;
}
*, *::before, *::after{
box-sizing: inherit;
}
.ball{
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 200px;
background-color: ;
border-radius: 100px;
}
Here is my main.js
var body = document.querySelector('body');
var h2 = document.createElement('h3');
var forma = document.createElement('form');
var inForma = document.createElement('input');
var h2 = document.createTextNode('Colour');
inForma.type = 'color';
inForma.id = 'listen';
body.appendChild(h2);
forma.appendChild(inForma);
body.appendChild(forma);
var bally = document.querySelector('.ball');
bally.style.backgroundColor = forma; // first attempt
console.log(bally.style.backgroundColor = forma);//first attempt
var button = document.getElementById('listen').addEventListener ('click', change);
function change(e){
document.querySelector('.ball').style.backgroundColor = forma;
}
I have made two attempts the first one just assigns the actual form element to the ball div and the second one nothing appears to be happening. The thought process for me was to assign the forma to the backgroundColor of the ball. I just need some guidance please.
there's a couple issues I see
there's a space here, which will break it
getElementsById is not a valid function, use getElementById
the event listener click will fire when you open the ui, you want to use a change listener, to update value after the user selects color
var button = document.getElementsById('listen').addEventListener ('click', change);
you don't have an element with a class called class, you do have .ball though
document.querySelector('.class').style.backgroundColor
here's a working version
https://jsfiddle.net/rp9kxLyu/
I just have a question about how I would make it so that there is a button in one column and when you click the button, text appears in another column. My overall goal is to make a simple clicker.
Here is my code:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Clicker</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<table width=600>
<tr>
<td width=300><span><font size=24px><button onclick='onClick()'>
click me
</button></span></td>
<td sidth=300><span><font size=24px>So does this</span></td>
</tr>
</table>
<script>
clicks = 0;
function onClick () {
clicks = (clicks + 1);
document.write ("you have clicked the button ")
document.write (clicks)
document.write (" times")
};
</script>
</body>
</html>
I have what I need to make it so that you get a message when you click the button, but when I do, all the other text dissipears and I get just that message. Tell me if it was a really stupid mistake or not please. I need to know.
To show the count of clicks in the page, and keep your html, a simple way to achieve that is adding a div and manipulate only its content with getElementById (to get the element) and then call innerHTML (to change the content of an HTML element).
Add this bellow your html table:
<div>
<h1 id=click-event> </h1>
</div>
And change your onClick():
function onClick () {
clicks = (clicks + 1);
document.getElementById("click-event").innerHTML = "you have clicked the button " + clicks + " times";
};
Create an annonymous function when you click the button and call the counting() function. This will increase the value of the variable countingClicks and then set the innerText of the element in the other column to that variable.
var x = document.getElementById("counter");
var y = document.getElementById("display");
var countingClicks = 0;
function counting() {
countingClicks++;
y.innerText ="Number of times clicked: " + countingClicks;
}
//When the counter button is clicked call counting
x.onclick = function(){
counting()
}
.container{
width: 600px;
box-sizing: border-box;
}
.row{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.six{
width: 48.33%;
text-align: center;
border: 1px solid black;
}
<div class="container">
<div class="row">
<div class="six">
<button id="counter">Counter</button>
</div>
<div class="six">
<span id="display"></span>
</div>
</div>
</div>
With peace and love for a confusing question.
<button onclick="a='textContent';t[a]=t[a].replace(/\d+/,++this[a])">0</button><p id=t>Total:0
I'm trying to create a to-do list. When I open up the html file (I'm using Google Chrome), there seem to be two issues:
The button doesn't appear to be a button, as in it doesn't click.
When I press enter instead of trying to click the add button, the text just disappears.
But in both cases, neither method appends the user input. What do I need to fix?
I have the following:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
});
h2 {
font-family: arial;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height: 20px;
width: 70px;
background-color: #cc0000;
font-family: arial;
font-weight: bold;
color: #ffffff;
border-radius: 5px;
text-align: center;
margin-top: 2px;
}
.list {
font-family: garamond;
color: #cc0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
Giving something the id of button does not make it a button. Maybe you should try: <button id="button>Add!</button>
When you press enter you are submitting the form, since you don't have any javascript intercepting the onSubmit event for the form it reloads the page.
If you want this action to happen when the user hits Enter, then you should move the button inside of the form and change the event to $('form[name="checkListForm"]').on('submit', ...)
Ok so I see a few problems here. First of all a div is not a button. I mean you could maybe do styling to make it look like a button, but why not just use:
<button type="button"> Add </button>
Also, you could just use onclick instead of defining that click event. I find this usually cleaner:
<button type="button" onclick="the_function();"> Add </button>
And then in your javascript define the function:
function the_function()
{
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
However, you are better off putting an id on the input like this:
<input type="text" id="check-list-input" name="checkListItem"/>
Obviously you don't need to use that naming convention. After doing that then you can revise that function to:
function the_function()
{
var toAdd = $('#check-list-input').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
But yet this still isn't as good as it should be. The list should also be an id not a class. If you had more than one list on the page, it would cause problems. Instead do this:
<div class="list" id="list-div"></div>
And then you can revise your function to:
function the_function()
{
var toAdd = $('#check-list-input').val();
$('#list-div').append("<div class='item'>" + toAdd + "</div>");
});
So the end result should be:
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" id="check-list-input" name="checkListItem"/>
</form>
<button type="button" onclick="the_function();"> Add </button>
<br/>
<div class="list" id="list-div"></div>
</body>
</html>
and for your jQuery (no need for document ready anymore, just be sure to include the javascript file or snippet before the html):
function the_function()
{
var toAdd = $('#check-list-input').val();
$('#list-div').append("<div class='item'>" + toAdd + "</div>");
});
I didn't test this yet, but I hope it works for you.
I need something like a fill in the blanks sheet for children. When people click the ------ (dashes) it should turn into a textbox, and people can type it. after that when they move from that element after typing, it should turn into the text that they entered inside that text box.
I really dono how to approach this problem. I tried the following code, but what happens is, i am unable to type inside the text box. The cursor is not appearing at all
<html>
<head>
<title>NSP Automation</title>
<script src ="jquery.min.js">
</script>
</head>
<body>
<div class="container">
My Name is = <span id="name">__________<span>
</div>
<script>
$(document).on('click', '#name', function(){
document.getElementById("name").innerHTML = "<input type=\"text\">";
});
</script>
</body>
</html>
any pointers on how to achieve this ?
Thanks,
Since you've set the listener on the whole document, you will be recreating the input-tag with every click. Try something like:
$('#name').on('click', function(){
this.innerHTML = "<input type=\"text\">";
$('#name').off('click')
}
After clicking on the span-element, you remove the listener on it again, and you should be able to type.
http://jsfiddle.net/218rff9v/
Here is an example that generates the wished behaviour for all spans in your container. Some details can be improved but I think it's working as expected.
function convertSpanToInput() {
// Insert input after span
$('<input id="tmp_input">').insertAfter($(this));
$(this).hide(); // Hide span
$(this).next().focus();
$("#tmp_input").blur(function() {
// Set input value as span content
// when focus of input is lost.
// Also delete the input.
var value = $(this).val();
$(this).prev().show();
$(this).prev().html(value);
$(this).remove();
});
}
$(function() {
// Init all spans with a placeholder.
$(".container span").html("__________");
// Create click handler
$(".container span").click(convertSpanToInput);
});
Here is an html example with which you can test it:
<div class="container">
My Name is = <span></span>. I'm <span></span> years old.
</div>
JsFiddle: http://jsfiddle.net/4dyjaax9/
I'd suggest you have input boxes and don't do any converting
Simply use CSS to remove the borders and add a dashed border bottom
input[type=text]{
border:none;
border-bottom:1px dashed #777;
} <!-- something like that -->
add a click handler to add a edited class, so you can remove the bottom border
input[type=text].edited{
border:none;
}
That way you don't need to replace html elements, you just style them to look different
Why not use text input and only change CSS classes?
CSS:
.blurred{
border-style: none none solid none;
border-width: 0px 0px 1px 0px;
border-bottom-color: #000000;
padding: 0px;
}
.focused{
border: 1px solid #999999;
padding: 3px;
}
JavaScript:
$('#nameInput').focus(function(){
$(this).removeClass('blurred').addClass('focused');
});
$('#nameInput').blur(function(){
$(this).removeClass('focused').addClass('blurred');
});
HTML:
<div class="container">
My Name is = <span id="name"> <input id="nameInput" type="text" class="blurred"></input> <span>
</div>
Check this jsfiddle:
http://jsfiddle.net/gwrfwmw0/
http://jsfiddle.net/we6epdaL/2/
$(document).on('click', '#name', function(e){
if( $("#myText").is(e.target))
return;
$(this).html("<input type='text' id='myText' value='"+ $(this).html() +"'>");
});
$(document).on("blur", "#name", function(){
$(this).html( $("#myText").val() );
});
I know how to make an image appear using onclick or onMouseOver but how can I make each click produce the appropriate image not just in the same place but, for example, in a row, next to it's previous apperance? My idea is this: I click on reference1 and a picture1 shows up. Then I click on reference2 and a picture2 shows up next to the picture1 already displayed. Now I click on reference1 again, and I want to see pictures 1,2,1 in a row. How can I do that? My ideal would be to see the row rolling when filled, and a delete button deleting the last image in that row, even making the pictures jump out being called from the text field, but I can search for these myself. My greatest concern for now is new click=new image. Thank you.
Assuming this is relatively simplistic- you could keep track of the current position in a list of images, afterwards create a function that deals with the current image then increments this position. Have the onClick event call this function, and there you are.
An example of this in action, using JQuery, can be viewed here:
http://jsfiddle.net/8Q4LQ/
Here's an example.
<html>
<head>
<style>
.refimg { width: 100px; height: 100px; }
.choices a { margin-right: 2ex; }
.choices img { display: none; }
#target { display:block; width: 500px; overflow-x: scroll; border: 1px solid black; }
</style>
</head>
<body>
Choices:
<div class="choices">
ref1
ref2
<image id="image1" src="image1.gif" class="refimg" />
<image id="image2" src="image2.gif" class="refimg" />
</div>
<br />
Selections: <input type="button" value="Delete" onclick="delImage()" />
<nobr id="target">
</nobr>
<script>
function putImage(src) {
var a = src.cloneNode(true);
a.id = ''; //clear id to prevent duplicate id
target.appendChild(a);
a.scrollIntoView(true);
return false;
}
function delImage() {
var a=target.children;
if (a.length>0) target.removeChild(a[a.length-1]);
}
target.style.height=((target.offsetHeight-target.clientHeight)+100)+'px'; //extend height for scroll bar
</script>
</body>
</html>