Why this code lines are not working
let a = document.getElementsByTagName("input")[0].value;
let b = document.getElementsByTagName("input")[1];
b.value = a;
A simple code to get value from one text and paste it into another text.
The issue code be that your code is running before the DOM is fully loaded. In that case you should get the following error:
Uncaught TypeError: Cannot read property 'value' of undefined
To solve the above issue either you can palce your code at the bottom of the body tag or wrap the code with DOMContentLoaded.
Demo:
<script>
document.addEventListener('DOMContentLoaded', (event) => {
let a=document.getElementsByTagName("input")[0].value;
let b=document.getElementsByTagName("input")[1];
b.value=a;
});
</script>
<input value="123"/>
<input />
JavaScript can't get input element.
Why did you decided to get inputs by theirs tagname? Use id's or classes for getting it.
Second is, check it for availability at all.
for example:
const [firstInput, secondInput] = document.getElementsByTagName("input");
if (firstInput && secondInput) {
secondInput.value = firstInput.value || 'default value';
}
Something like that.
Related
I am trying to change the visibility style of a div element in a svelte component based on a typescript function.
The sample code is like the ones below:
<script>
const abc = () => {
if (RecipientNumberOffScreen == 0) {
return document.querySelector<HTMLElement>('.recipients__OffScreen').style.visibility = 'hidden'
} else {
return RecipientNumberOffScreen // a calculated variable
}
}
</script>
<div class="recipients">
<div class="recipients__OffScreen">{abc()}</div>
</div>
And I am getting the following error in the console
Uncaught TypeError: Cannot read properties of null (reading 'style')
What I could understand by debugging that the document.querySelector<HTMLElement>('.recipients__OffScreen') is getting null value because first the JS gets loaded in the DOM, and then the html codes are being loaded. I was wondering if there is any way to make the function execution wait before the html gets loaded in svelte? Or what is the best way to achieving it?
I am very new to svelte, thanks in advance.
I tried many ways to get the value of a ViewBag in Javascript, but all showed errors. I have a view and a js file.
<input type="text" id="myInput" data-myValue="#ViewBag.PrimerNombre" />
//Undefined
var myVal = $("#myInput").data("myValue");
alert(myVal);
<input type="hidden" id="customInput" data-value="#ViewBag.PrimerNombre" />
//Cannot read property value of null
var customVal = $("#customInput").data("value");
alert(customVal);
//Cannot read property value of null
<script type="text/javascript">
var myJsVariable = '#ViewBag.PrimerNombre'
</script>
//Show warning is not defined
$(document).ready(function() {
showWarning('#ViewBag.Message');
});
//Unrecognized expression ##(ViewBag.PrimerNombre)
var x = $('#' + '#(ViewBag.PrimerNombre)').val();
//Cannot read property value of null
var myValue = document.getElementById("#(ViewBag.PrimerNombre)").value;
I tried all, one by one, there is one part ot the view that matchs a part in the javascript file, i put the errors above, if you know a way that really works please tell me.
I´ve found that the code that was after in my js, some code i copied and that i needed to adapt was the one causing the error
I'm going through some legacy code on a submission form and replacing JQuery w/ vanilla JS.
Right now, I have this function that uses .val() (JQuery) to grab the value for an undefined input:
myFunction: function(){
var subscription = $('input[name="subscription_id"]').val();
// Do something with subscription
}
When I run the code in my browser, I get no issues - the code is meant to work only if a subscription is passed into the input - if it's not there, we just get an undefined value. The value returned by the JQuery combo of $() and .val() console logs to 'undefined'.
When I replace the JQuery with vanilla JS, like so:
myFunction: function(){
var subscription = document.querySelector('input[name="subscription_id"]').value;
// Do something with subscription
}
And then try to run my form, I get the following error in the console:
Uncaught TypeError: Cannot read property 'value' of null
Why is this happening? And is there a workaround for this? Any help is appreciated. Thanks in advance.
This happens because
document.querySelector('input[name="subscription_id"]')
does not exist. For vanilla js, you need to check if it exists first, then get the value if it does. jQuery has a silent fail for this.
var element = document.querySelector('input[name="subscription_id"]');
// If it exists, return its value, or null
var subscription = element ? element.value : null;
Just use a condition:
var elem = document.querySelector('input[name="subscription_id"]');
var subscription = elem ? elem.value : "";
My form calculations work in my jsfiddle, however in my wordpress page, it says Uncaught TypeError: Cannot set property 'onchange' of null. Is my page not loading the function when it loads?
(javascript in the header)
function doTotal(form) {
var a = (+form.halfday1.value);
var b = (+form.fullday1.value);
form.total1.value = a + b ;
}
document.getElementById("quote").onchange = function (){doTotal(this)};
http://jsfiddle.net/2666c/
Your code not run, becouse on moment it try to find the <element id="quote"/> there are no such elements. You need to put your code under this element. Or run it on document load event.
As example:
jQuery(document).ready(function($){
jQuery('#quote').change(function (){doTotal(this)});
});
I need to create a script that will filter out content based on a list of keywords (if the content contains one of these keywords, I want to apply a style to it).
So far, I have this code:
jQuery.expr[':'].mcontains = function(obj, index, meta, stack){
result = false;
theList = meta[3].split("','");
var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
for (x=0;x<theList.length;x++) {
if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
return true;
}
}
return false;
};
$("div:mcontains('facer','non')").css("background","red")
I did not write this myself, I found it online, but I got it working fine the way I need it in a fiddle:
http://jsfiddle.net/jtmVf/1/
However, when I try to port it into a project, I am getting this error in firebug:
TypeError: meta is undefined
On this line:
theList = meta[3].split("','");
I'm not sure why it's undefined there, but not throwing an error on the fiddle? There are no conflicts (I removed all other js except jquery.min in order to see if that was the issue).
I was hoping someone here would be able to see what I'm missing, what is wrong with this script?
post your code where you are assigning the "meta" array contents. Because these type of error usually shows when there is not such index in the array