FBJS is driving my mental, I am having problems with selecting elements. I have the following on the content of my page:
<button id="sendmessage" type="submit" style="border: 0; background: transparent">
<img src="Button.png" alt="Submit" />
<div id="output">Send Message</div><span id="overlay"></span>
</button>
And as part of my FBJS I have
var refSendMessage = document.getElementById('sendmessage');
var refOutput = document.getElementById('output');
However
refSendMessage.setDisabled(true);
Gets the error Uncaught TypeError: Cannot call method 'setDisabled' of null
But
refOutput.setTextValue("Sending...");
Works fine!
Why is the type of refSendMessage null but refOutput is fine? The ID's are declared in the same place?
Need a JS wizard please :-)
Many thanks for your time,
Extra information, if I use <span id="sendmessage"></span>, no error occurs. Could this be a Facebook Bug?
Make sure you don't have anything else with id 'sendmessage' on the page.
Try to change <button> to an <input type="button"> with id 'sendmessage' and see if document.getElementById('sendmessage') still returns null. If not, perhaps Facebook has trouble with the <button> element?
Try looking at the rendered markup and make sure the Facebook-generated id specified inside document.getElementById() matches the Facebook-generated id of your button element. If they don't match, then of course a null will be returned.
Related
<form action="" class="search-form">
<input type="search" id="search-box" placeholder="search here...">
<label for="search-box" class="fa fa-search" aria-hidden="true"></label>
</form>
My javascript code :
let searchForm = document.querySelector('.search-form');
document.querySelector('#search-b t n').on click = () =>{
searchForm.classList.toggle('active');
}
the error says:
Uncaught TypeError: Cannot set properties of null (setting 'onclick')
at script.js:5
Firstly, your code seems strange ans lot of space appear in it. I edit to remove them, but check that all works are complete.
Then, the error comes because it failed to find the objet with id search-b t n. Even without space, it doesn't works because in your form, there is no div with this id.
You should use something like this:
document.querySelector('#search-box`)
Because this ID exist.
I have a problem in using easyui panel, so I am here needing somebody's help , even thought i find a few people use easyui in stackoverflow.
I have a panel in my page like:
<div class="easyui-panel" title="" id="pp" closed="true" style="width:100%">
</div>
And then, I want to put a value of a input value to this pp panel.
The input value and button code is :
<input type="text" style="width:97%;height:40px" id="drafterId" value='ths'>
bt
Now I want to use drafter function when clicking linkbutton to realize it :
function drafter()
{
var drf=$("#drafterId").val();
alert(drf);//works OK
var drfN="<tr>"+drf+"</tr>";
$('#pp').panel('refresh', 'drf'); //works fail
}
But unlucky, $('#pp').panel('refresh', 'drf');works fail. I have tried another way:
$('#pp').html(drf);
and
$('#pp').innerHTML(drf);
They both failed. Who can help me?
$('#pp').append(drf); works OK
Remove the quotes around the variable name ‘drf’.
So $('#pp').panel('refresh', 'drf');
Becomes$('#pp').panel('refresh', drf);
This question already has answers here:
Selecting element by data attribute with jQuery
(12 answers)
Closed 5 years ago.
I'm sort of a novice with HTML and JavaScript, but I'm running into some trouble with this one.
I have the following code snippet:
<div data-contents="true">
<div class="" data-block="true" data-editor="369vc" data-offset-key="e371k-0-0">
<div data-offset-key="e371k-0-0" class="_1mf _1mj">
<span data-offset-key="e371k-0-0">
<span data-text="true">TEXT HERE</span>
</span>
</div>
</div>
</div>
I'm trying to insert text where the "TEXT HERE" resides using the following commands (as found on this Stack Overflow thread) from within the console:
span = document.getElementById("data-text");
txt = document.createTextNode("TEXT HERE");
span.appendChild(txt);
However, when I run that command, all I get in return is Uncaught TypeError: Cannot read property 'appendChild' of null at <anonymous>:3:6.
I've read it's caused by the element not being defined prior to the script running, so it's unable to assign the text to it. I'm not fully clear on why it wouldn't run even though the website has already loaded though. Any ideas? I'm hoping to eventually hook this to a button that's loaded on the webpage, instead of it automatically running upon load if that makes sense.
NOTE: I'm not creating a website from scratch. This is a script being used on Facebook by TamperMonkey, so I can't permanently load it into the webpage.
You call this:
span = document.getElementById("data-text");
But don't have any id called data-text.
Either change the code to this:
span = document.querySelector("[data-text]");
Or change the html to this:
<span id="data-text" data-text="true">TEXT HERE</span>
Notice the id="data-text" That is what getElementById is looking for.
Here is the "submit" button in the form with no onclick attribute.
<div id="243c0bb6-584e-4d48-a8fa-4308cd632028" class="nike-unite-submit-button joinSubmit nike-unite-component blurred">
<input id="d7e56d05-36e1-42f7-922b-d2979375007a" type="button" value="CREATE ACCOUNT">
</div>
I am more confused about the <form> tags from the Nike website source:
<form id="nike-unite-joinForm" class="nike-unite-form" method="post"
action="javascript:;" onsubmit="return false;">
...
</form>
How do I find out what is happening when I actually click the button on the page?
Using mouse-click breakpoints in chrome dev tools gives me a plethora of JavaScript functions takes too long for me to parse through.
If there are attributes or listeners added to the ID (such as a link to a script), I could not find them after using "Command-F" on the different attributes of the form.
The only other clue which I am not sure how to purse is that method="post".
I understand that all websites are different, but my question is a general one:
How do I figure out what the script that is being run when I click on the form?
Thanks in advance.
Try this:
document.getElementById('nike-unite-joinForm').submit();
This is from w3schools.com:
https://www.w3schools.com/jsref/met_form_submit.asp
EDIT:
Ok, I tried it myself on the registration website and it didn't work. Experimenting a bit with it I noticed an apparently random id is assigned to the DOM-Elements.
But I've found a solution:
document.getElementsByClassName("nike-unite-submit-button joinSubmit nike-unite-component")[0].children[0].click();
This works because the div in which the submit button is has a unique set of classes. So I get the first (and only) Element with this classes, and apply .click() to the first child element
Perhaps you could try to change submit with click:
document.getElementById('nike-unite-joinForm').click()
i want to duplicate one element and then assign to new id and names. my aim is later i want find that element again. here is an example:
<div id="contDiv">
<div style="float:left"> filename </div>
<div style="margin-left: 323px"> playtime(in Sek.) </div>
<div id="tl_Einst" class="editor-field">
<select id="Medianames" onchange="change(this)" name="TL_Medianame">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg- for="Filename"> </span>
<select id="playtime" class="playtime" name="playtime" disabled="">
</div>
<input id="More" type="button" onclick="Addfiles()" value="+">
</div>
in the runtime i duplicate the Element "tl_Einst" with its children. then the user changes the content of the combox then i read them and send them to the server. later i get an answer. so i call the GetelementById("newElementID"), but i get always null, if search for the new created element. what can i do?
thank you
marek
The proper syntax is:
var el = document.getElementById("newElementID");
Typically, # is for JQuery or other javascript frameworks, or as #Quention mentions below, can also be used with document.querySelector.
Where are you adding the element to the DOM? Could you include that code too?
Have you added it to the page?
getElementByID will only find an element in the DOM. You can either add it to the page or simply assign it to a variable.
var newElementID= document.createElement("p");
You can now find it in your code with newElementID even if it's not in the page.