Printing a property from html tag - javascript

Say you have something like this:
<input id="state" type="radio" name=${this.group} .checked=${this.checked} />
(Code from LitElement Dot with HTML elements attribute/property as I was researching what the dot meant)
Is it possible to print out what ${this.checked} is? If so, how?
Clarification: Is it possible to print it from, for example, another file?
Like if you wanted the id, it would be something like this.input.getAttribute('id'), but for the .checked

Did you try using ${this.checked} where you want to display it ?
<input id="state" type="radio" name=${this.group} .checked=${this.checked} />
(checked: ${this.checked})

Related

How can I dynamically append and remove text for multiple class names?

I have loads of elements of my page.
<input class="userInput" type="text" />
<img src="myPic.png" class="userImage" id="userImage" />
<input class="firstNameInput someOtherClass" type="text" />
<input class="lastNameInput" type="text" />
...etc...
However I need write a function to change the classes dynamically so that they end in "Red". e.g. "userInputRed","userImageRed". And then another function to revert them back.
I can select them all easily enough...
$('.userInput','.userImage'....)
..but I don't know how to alter their existing classes without writing lengthy code adding and removing classes for each element individually.
e.g. $('.userInput').removeClass('userInput').addClass('userInputRed')
Is there a way to do this using JQuery without so much repetition?
So something like this...
$('.userInput','.userImage'....).appendToClassName('red');
$('.userInputRed','.userImageRed'....).removeFromClassName('red');
You can toggle the class .red and target it in CSS with .userInput.red

how to get text associated in a html input tag of type checkbox

I have my element like below
<input type="checkbox" id="Countries" value="Ind">India</input>
How to get output as "India"?
Below returns only Ind
document.getElementById("Countries").value;
There is a way to get the value when you don't care about semantically correctness.
alert(document.getElementById('Countries').nextSibling.nodeValue);
<input type="checkbox" id="Countries" value="Ind">India</input>
For completeness:
You shoult do an input type like this as mentioned in the Form W3
<label for="Countrie">India</label>
<input type="checkbox" id="Countrie" />
or
<input type="checkbox" id="Countrie" />
<label for="Countrie">India</label>
or
<label>
<input type="checkbox" name="Countrie" />
India
</label>
also mentioned in THIS POST
and then use javaScript to get a coresponding label value.
I don't think that you can because that isn't valid HTML code.
An input tag is empty, meaning that it can only contain attributes. Therefore, there is no </input> to close it.
There are ways to store data in it though.
As of HTML 5, there is a data- attribute that you can put on any element. You could do something like this:
<input type="checkbox" id="Countries" value="Ind" data-something="India" />
// Inside JS
document.querySelector("#Countries").dataset.something
Another alternative would be to wrap a p or a span around the text after it.
<input type="checkbox" id="Countries" value="Ind" />
<p id="CountriesText">You can get this value easily enough</p>
This is not possible because your html is wrong.
input is a self closing tag, so it should be like this.
<input type="checkbox" id="Countries" value="Ind" />
So there is no other value you could extract with javascript then the value.
Or you should use a data-attribute with India as a value.
HTML
<input type="checkbox" data-country="India" id="Countries" value="Ind" />
JS
var checkbox = document.querySelector('#Countries'); // or document.getElementById("Countries");
alert(checkbox.dataset.country);
See this fiddle http://jsfiddle.net/zwx43m59/

Javascript get values of multiple text fields

I have a dynamic web page where the content may contain between 1 and 10 links, provided in text boxes, similar to the following:
<input size="50" id="link" value="http://Something.Something" type="text">
<input size="50" id="link" value="http://SomethingElse.Something" type="text">
I need javascript to be able to read all of the links, and be able to manipulate the data (store in array, output to screen, etc)
I know that I can read a single id using the following
var link = document.getElementById('link');
Which will return the first match - but, how can I do a loop or obtain all the values for all the links, bearing in mind that the number of links cannot be determined beforehand?
P.S. I have tried using getElementsByTagName('input') but there are more inputs on the page, which means it's getting more results than I'd like it to get.
You can make them all have names and search by name.
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
Then you can get it with:
var vrows = document.getElementsByName("vrow");
alert(vrows.length);
Give them all a common class and access using document.getElementsByClassName('class').
IDs should be unique for each element. You could use document.getElementsByClassName or document.querySelectorAll(".class"); and then use the class name (assuming relatively modern browser). Or use document.getElementsByTagName() and then iterate through the elements comparing with the class.
Attach a jQuery lib and you will be able to do something like:
$('input[type=text]').each(function(i, val){
alert($(this).val());
});

How to reach javascript object property

I have some radio buttons like to
<input type="radio" checked="checked" value="0" id="paramsmenu_images0" name="params[menu_images]">
I would like to reach this in javascript somehow like this:
console.log(document.adminForm.params[menu_images]);
Of course it doesn't work, so how can I reach it?
Is this OK?
document.getElementsByName('params[menu_images]')
You can also iterate over document.adminForm.elements to find your form element...
document.getElementById('paramsmenu_images0') will give you the dom element if that's what you want.

In javascript how do I refer to this.form.checkbox[5].checked?

I have a series of checkboxes and input type="text" areas, wherein I need to have the state of the checkbox set to true when the value in the text area changes. Simple enough. I've done this successfully:
<input name="fixed" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed.checked=true">
Which works fine. You have to edit the field then click out of it, but that is fine for my needs:
...but when I switch to this:
<input name="fixed[0]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[0].checked=true">
<input name="fixed[1]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[1].checked=true">
I get no change to my checkboxes when I edit:
My only javascript know-how comes from googling this sort of thing, I'm afraid. Anyone have any better info on this than the Oracle of Google on The Mountain has in store?
thanks...
Switch from dot notation to bracket notation!
this.form['fixed[0]'].checked
It might be that you're mixing some shady practices in HTML, and when you do it in javascript, they're breaking.
So this.form.fixed[1] in javascript really says "The second item in the array this.form.fixed. So I think that's the problem. try naming your elements fixed0 and fixed1 and see if that works.
Edit: You could also use bracket notation, as illustrated by Peter, which should solve the problem without editing the names of the inputs.
Make life easier on yourself.
Create unique ID's for the elements you are trying to reference and refer to them from the elements to which you bind your events:
<input name="fixed[0]" type="checkbox" id="fixed_0">
<input name="stuff" type="text" onchange="document.getElementById('fixed_0').checked=true">
<input name="fixed[1]" type="checkbox" id="fixed_1">
<input name="stuff" type="text" onchange="document.getElementById('fixed_1').checked=true">

Categories