Not able to click on Label in Javascript - javascript

I am trying to click on label, but not able to. Here is my code:
function nameToggle(){
var NameInput = get("nameInput");
var labelName = nameInput.getLabel();
alert(labelName);
labelName.onclick = showAlert;
}
function showAlert(){
alert("onclick Event Detected");
}
And here is my html:
<div id="nameShow">
<div style="margin: 36px 0 0 50px;">
<input id="nameInput" label="Name" onkeydown="namesFunction()"/>
</div>
</div>
In the input I want to onkeydown call namesfunction which works perfectly but when click on label(Name) I want to toggle. I am calling nameToggle in another function. But I am not able to click on "Name". i am not using jQuery. only Javascript. Any help is appreciated.

1) Inside your function nameToggle()you have assigned onclick to labelName, but thats a string ("Name"). Assign onclick to NameInput which is the element:
function nameToggle(){
var NameInput = document.getElementById("nameInput");
var labelName = nameInput.getLabel();
alert(labelName);
NameInput.onclick = showAlert; // <---
}
2) Since you make the onclick-assignment inside the function, you have to invoke it somewhere with nameToggle() before you can click.
If you don't want that you have to make the assignment outside a function:
document.getElementById("nameInput").onclick = showAlert;
Edit According to your comment: Only a DOM-element is clickable. Your label is only an attribute of an element and you can't click an attribute. Make the label a real element in your html just before the input like so:
<label for="nameInput" onclick="showAlert()">Name</label>
The for-attribute says that this <label> belongs to input with id = nameInput. You can assign the onclick inside the tag as shown above or with:
document.querySelector("label[for='nameInput']").onclick = showAlert;

Related

How to remove inner HTML content onchange

I created a form where a user selects options from a checkbox list. So when a user selects an option in the checkbox, I use a function to show the value of the input field using onchange within inner HTML. My question is, how do we remove that same inner HTML content if the user un-selects those options? So when the user toggles back and forth, it either appears or when un-selected, the value gets removed. Thanks
function functionOne() {
var x = document.getElementById("wheels").value;
document.getElementById("demo").innerHTML = x;
}
<input type="checkbox" id="wheels" onchange="functionOne()" value="feature 1">
<div id="demo"></div>
Check the state of the checkbox before you read the value.
function functionOne(cb) {
var x = cb.checked ? cb.value : '';
document.getElementById("demo").innerHTML = x;
}
<input type="checkbox" id="wheels" onchange="functionOne(this)" value="feature 1">
<div id="demo"></div>
Inside the change function on deselect do this:
document.getElementById("demo").innerHTML = '';
The element that is changed has a checked property which can be inspected - it will be either true or false. So write an if/else condition to update the content of the demo element depending on its value.
I've adjusted your code slightly to cache the elements outside of the function, and to add an event listener to the checkbox instead of using inline JS which is a bit old-school these days. Also, since the value is just a string textContent is more suitable in this case than innerHTML.
// Cache the elements
const wheels = document.getElementById('wheels');
const demo = document.getElementById('demo');
// Add a listener to the wheels element which calls the
// handler when it changes
wheels.addEventListener('change', handleChange);
// Here `this` refers to the clicked element. If its
// checked property is `true` set the text content of
// `demo` to its value, otherwise use an empty string instead
function handleChange() {
if (this.checked) {
demo.textContent = this.value;
} else {
demo.textContent = '';
}
}
<input type="checkbox" id="wheels" value="feature 1">
<div id="demo"></div>

Enter information in input and shows the information on the div's textContent simultaneously

I'm a HTML JS beginner.
Right now I'm doing a Meme generator project and I encounter a problem
this is my HTML code
//this is input tag
<div>
<input type="text" placeholder = 'text' class="mtext">
<input type="text" placeholder = 'text' class="mtext">
</div>
//this is my div block.
<div id = "meme">
<div class="mtext1" style = 'left: 5px; top: 5px; width: 400px; height: 25px'></div>
<div class="mtext1" style = 'left: 5px; top: 5px; width: 400px; height: 25px'></div>
</div>
and my thought is wanting to use "addEventListener" to solve this problem.
const inputText = document.querySelectorAll('.mtext')
const showTextBox = document.querySelectorAll('.mtext1')
inputText.addEventListener('????' , function(){
showtextbox.textContent +=
})
the first problem is what addEventListener parameter is proper to meet my expectation? That I can type into the text box and shows the result on div box at the same time.
the second problem is my inputText and showTextBox are array-like value, how can I extract the value for each of inputText and represent to the right showTextBox?
Thank you
First of all, you are looking for the change event. Check this website
// this code is wrong, read below.
inputText.addEventListener('change' , function(){
// code
});
second, inputText and showTextBox are not what you think they are.
document.querySelectorAll gives you a NodeList which is just a list of html elements (for example - [elem1, elem2...] ). See this website. So inputText and showTextBox are lists.
You need to put an eventListener to every one of those elements in the list:
inputText.forEach(element => {
// add eventListener to every element in the list:
element.addEventListener('change', function () {
// element.value gives the value inside your input elements.
// your code
})
});
The code above puts change eventListener to every mtext class.
Here is how you do it:
const inputText = document.querySelectorAll('.mtext');
const showTextBox = document.querySelectorAll('.mtext1');
//element is current element, index is the current element's index
inputText.forEach((element, index) => {
// add eventListener to every element in the list:
element.addEventListener('change', function (e) {
// element.value gives the value inside your input elements.
showTextBox[index].innerText = element.value
})
});
Here is the demo
you can also use keyup, but as this post discusses:
The reason you should not use keyup() is because if a user inputs a value using autofill, it will not fire the keyup() event. However, autofill does fire the change() event, and your verification script will run, and the input will be verified.

Can you getContext of text value?

So I have an input form that needs to be not visible for a certain point. So I use CSS and Javascript to hide the input until it should be visible. I come from a python background and what I would like to do is something like:
name = input("")
I tried to do something like that but it just assigns the change in visibility to the variable. I have tried using .value however I just can't it to work properly.
I was wondering if you can get can getContext (or if there is something similar) that allows me to assign what the user. Or I could just simply append it to a variable for it work as it should.
To give additional context I need the form to get the value the user has inputted when they click submit on the canvas
var gameOver = true;
if (gameOver){
document.getElementById('name').style.visibility = 'visible'
console.log(name)
}
<html>
<body>
<input id = "name" type="text" class="name"
style="visibility: hidden;"></input>
</body>
</html>
You can do that by simply declaring a variable, say var nameInput, and then assigning the DOM node to it:
var nameInput = document.getElementById('name');
Note that you should not be using name, because it is an implementation-dependent reserved keyword in JavaScript.
To access its style object, you can simply use nameInput.style..., e.g. nameInput.style.visibility = 'visible' if you want to update the visibility property.
If you want to retrieve it's value, you can do this:
console.log(nameInput.value);
var gameOver = true;
if (gameOver) {
var nameInput = document.getElementById('name');
nameInput.style.visibility = 'visible';
console.log('DOM node: ' + nameInput);
console.log('Value: ' + nameInput.value);
}
<input id="name" type="text" class="name" style="visibility: hidden;" />
If you want to dynamically retrieve its value as the user inputs it, you will need to read up on event binding using .addEventListener(). JS is not reactive in the sense that you dynamically update variables upon user interaction with the page. The regime is this:
User triggers some kind of event. In this case, you want to listen to the onInput, onChange, onBlur... events
In your JS logic, you will have to listen to this event that is emitted by the element. This is done by binding an event listener to your DOM node.
var gameOver = true;
if (gameOver) {
var nameInput = document.getElementById('name');
nameInput.style.visibility = 'visible';
console.log('DOM node: ' + nameInput);
console.log('Value: ' + nameInput.value);
}
nameInput.addEventListener('input', function() {
console.log('Updated value: ' + this.value);
});
<input id="name" type="text" class="name" style="visibility: hidden;" />
If I properly understand your question, your problem right now is to get the input value because you already have the code to make it visible.
So what you need to do is to add a handler to your input to execute a function in the moment you want to retrieve the value the user types-in, for instance on change:
HTML:
<input id = "name" type="text" class="name"
style="visibility: hidden;" onchange="inputChanged();"></input>
Javascript:
function inputChanged() {
console.log(document.getElementById('name').value);
}
Hope this helps !

Unable to get value of input field, even through text() and val() methods

I want to get the value of an input field that a user will type into, then do things with it. I've tried the two ways to get value , text() and val(), on the input fields, but neither work.
Kindly advise on what it could be that I'm missing here.
What happens exactly in the code below is that after hovering a button, the value of an input field would be shown through an alert() function. But the alert is constantly blank.
HTML
<div id="collection_name">
collection name
</div>
<input type="text" id="collection_title" placeholder="Midnight in New York">
<div id="collection_button"></div>
jQuery
var collection_title = $('#collection_title').text();
var collection_button = $('#collection_button');
collection_button.on({
mouseover: function() {
alert(collection_title); // the alert comes out blank
}
});
You need to call the text()/val() methods within the handler itself
var collection_title = $('#collection_title');
var collection_button = $('#collection_button');
collection_button.on({
mouseover: function() {
alert(collection_title.val()); //or .text() depending on the element type
}
});
The reason it was blank before is at the time of initializing
var collection_title = $('#collection_title').text();
it had no text value
Demo Fiddle
var collection_title = $('#collection_name').text();
var collection_button = $('#collection_button');
collection_button.on({
mouseover: function () {
alert(collection_title); // the alert comes out blank
}
});

Hiding Text inside of an input element

I have a text input, and I want to hide the text inside, on a given event(I disable the input, when it is not needed). I would like to display the hidden text, when the given event is reversed.
I know I can store the value and retrieve as needed. I'd like to avoid moving data, since this is a purely cosmetic operation.
Can the input text be hidden, or is manipulating the data in the input the only way? I would like the simplest solution.y?
I can use pure JS and jQuery.
I would use "value" attribute of the same input object, since the attribute is the default value. In this case you don't even need any additional variables. The idea of this approach comes from the difference between properties and attributes. It means that if you change value property of the object, the attribute value remains the same as it was before.
var input = document.querySelector('input');
function hide() {
input.value = "";
}
function show() {
input.value = input.getAttribute('value');
}
<input type="text" value="Some text">
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
An example on how to store the value of an input element inside the dataset of the element.
and show/hide it on hover.
var hello = document.getElementById('hello');
hello.dataset.value = hello.value;
hello.value = '';
hello.addEventListener('mouseover', function() {
hello.value = hello.dataset.value;
});
hello.addEventListener('mouseout', function() {
hello.value = '';
});
<input id="hello" value="Hello World" />

Categories