Develop Reference

How to insert javascript function into html div

I have a .cshtml file with the following in the head tag:
<script type="text/javascript">
getPlatform = function() {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
</script>
The reason I've inserted this is because this logic was already taken care of in another javascript file which I've imported in. Essentially what I need to do is change the link of a button depending on which platform the user is using. I've tried the following but this does not work (and even if it did, looks messy and I'm sure incorrect) but I can't seem to find a solution. Can anyone help please?
</div>
getPlatform()</script> id="mobilelink" class="btn"
</div>

One cannot write this:
getPlatform()</script> id="mobilelink" class="btn"
This is how it can be done:
</div>
<a href="" id="mobilelink" class="btn" </a>
</div>
<!-- Later in the page (ideally just before the end </body> tag) -->
<script>
document.getElementById('mobileLink).href = getPlatform()
function getPlatform () {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
</script>

why don't you check it when the page is loaded and change the href of the a tag accordingly? Like:
<a id = "mobileLink" href="">some text</a>
And
var getPlatform = function() {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
document.getElemenyById("mobileLink").href = getPlatform
//Or innerHTML, I don't really understand what you want to do

<script type="text/javascript">
function getPlatform() {
if (Platform.Android) {
document.getElementById('mobileLink').innerhtml = "androidlink";
}
else if (Platform.IOS) {
document.getElementById('mobileLink').innerhtml = "IOSLink";
}
else {
document.getElementById('mobileLink').innerhtml = "other";
}
}
</script>
the html,
</div id="mobilelink" class="btn" onload = "getPlatform()">
</div>
Right now I can only assume the results, that you need. This is one of the ways, inwhich you can return the result from a JS function to the html division. If the onload doesnt work, I'd suggest using an onclick = "getPlatform()" function since that is more aggressive in its notation.

this is incorrect approach.
I would recommend you put all scripts before closer </body> html-tag.
Then in your script you can write such code like:
const platform = getPlatform();
const mobilelinkEl = document.querySelector('#mobilelink');
mobilelinkEl.setAttribute("src", platform);
Make sure, that your script tag with src attribute set placed after script tag with getPlatform, and also make sure you have access to getPlatform function.
If you'll have additional question, write comments, I'll try to help you.

Hiding HTML Element With Specific Class Unless URL Parameter is Present Using Javascript

Trying to hide an element (class of "input-container") with a specific class unless a specific URL parameter is present. Have worked out the following code, but can't seem to get it to work. The if/else statement has been tested using alerts, so I know that portion is working. It's where I'm trying to assign the display variable where the code seems to be breaking. Unfortunately, I have to do this using the class name rather than an ID. Thoughts?
<script>
var isadmin = document.getElementsByClassName("input-container");
if (window.location.search.indexOf('admin=yes') > -1) {
isadmin[0].style.display = "block";
} else {
isadmin[0].style.display = "none";
}
</script>

Your code seems alright. I wonder why is not working. Anyway I would try this
<script>
var isadmin = document.getElementsByClassName("input-container");
var url = new URL(window.location);
if (url.searchParams('test') && url.searchParams('test') == 'yes') {
isadmin[0].style.display = "block";
} else {
isadmin[0].style.display = "none";
}
</script>

As it turns out, it was an issue between the seat and the keyboard. I'm an idiot and didn't realize that the Javascript was executing prior to the elements loading. Fixed the issue with the following code...
<script>
window.onload = hidePass;
function hidePass() {
var isadmin = document.getElementsByClassName('input-container')[0];
if (window.location.search.indexOf('admin=yes') > -1) {
isadmin.style.display = "block";
} else {
isadmin.style.display = "none";
}
}
</script>

javascript not operating in safari

I have a funny issue. For some reason on Safari browser the javascript Logic Gates are not working properly. Here is a breakdown:
This whole script is being called with $(#id).load(my/script.php) function
I create a clean vairable.
$perm = $_POST['permission'].
I create html variable
$html_content .= " <div id='bsid_$account_id' onclick="bsview(id)"></div>
I echo the html
<?=$html_content?>
Based on permission ai change the functionality of bsview function i applied in my div.
if ("<?=$perm?>" != "user"){
function bsview(id) {
console.log('manager');
}
}else{
function bsview(id) {
console.log('user_view');
}
}
Then something funny happens. After checking in Chrome, IE, and Firefox I confirm that the code is working. However when I run the code in Safari the logic gate that should return "TRUE" this permission doesn't equal 'user', instead returns FALSE.
This is code echoed into my Safari debugging thinger.
if ("manager" !== "user"){
console.log('manager');
function bsview(id) {
console.log('manager');
}
}else{
function bsview(id) {
console.log('user_view');
}
}
</script>
And of course it console logs 'users_view'
Ok. If anyone has any insight or criticism for my crappy code please send them my way. I would love to know why this is happening, and how to avoid this same thing from happening.

According to
Function declarations inside if/else statements?
it's not valid to put function declarations inside if/else. You should declare the function name outside the if, and then assign to it.
var bsview;
if ("<?=$perm?>" != "user"){
bsview = function (id) {
console.log('manager');
}
}else{
bsview = function (id) {
console.log('user_view');
}
}
Or you could simplify it to:
function bsview(id) {
console.log('<?= $perm == "user" ? 'user_view' : 'manager' ?>');
}

How to execute code when a div is clicked?

I've spent the last few hours trying to find the answer to this, but nothing seems to work...
I need to execute a piece of code when a div (or anything inside of it; including iframe content) is clicked. The following code should do it (when added into the div tag), but it doesn't seem to work.
onclick="if(typeof(_vis_opt_top_initialize) =='function'){ _vis_opt_goal_conversion(200); _vis_opt_pause(500);}"
The purpose is to execute a custom conversion goal:
<script type="text/javascript">
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
</script>
Any help will be greatly appreciated :)

I hate using inline js... hate it...
If you need to account for IE (<8), then you can't use addEventListener, so you can do something like this:
function bindListener(el,eventName,eventHandler) {
if (el.addEventListener) { // Anything but IE <8
el.addEventListener(eventName,eventHandler,false);
} else if (el.attachEvent) { // For IE <8
el.attachEvent('on'+eventName,eventHandler);
}
}
Then you can call it using something like this:
var ele = document.getElementById('idOfElement');
bindListener(ele, 'click', functionToCall);

Try using addEventListener. Link here. The Example on that page is exactly what you are asking for.

First give your div a unique ID
<div id="yourDivID"></div>
then set the onclick function in window.onload
var yourDiv = document.getElementById("yourDivID");
yourDiv.onclick = function() {
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
}
}

I write simple example for you:(j Query answer)
Html Code
<div class="test">Click</div>
JavaScript Code
$('div.test').click(function(){
alert("some");
});
Demo
Edited
JavaScript example
<html >
<script type="text/javascript">
function AttachAllDivEvents()
{
var divCollection = document.getElementsByTagName("div");
for (var i=0; i<divCollection.length; i++)
{
AttachDivClickEvent(divCollection[i]);
}
}
function AttachDivClickEvent(divObj)
{
divObj.onclick = function()
{
document.getElementById("count").innerHTML = parseInt(document.getElementById("count").innerHTML) + 1;
};
}
window.onload = AttachAllDivEvents;
</script>
<body>
<div>click</div>
<p id="count" style="font:bold 20px Times;color:red;text-indent:20px">1</p>
</body>
</html>

Converting Some Code to jQuery

Hey guys, I have some code that I found that I would rather use as jQuery instead of direct JavaScript. Hopefully you guys can help me convert it:
var sub = document.getElementById('submit');
sub.parentNode.removeChild(sub);
document.getElementById('btn-area').appendChild(sub);
document.getElementById('submit').tabIndex = 6;
if ( typeof _some_var != 'undefined') {
document.getElementById('some-textarea').value = _some_var;
}
document.getElementById('something').style.direction = 'ltr';
The reason I want to do this is because FireFox is telling me that sub is null when it is used on the second line. This happens because that code runs before the the submit button appears. So naturally I would like to use jQuery for the purpose of running the code after everything is ready. Yes, I know it's possible to do that in direct JavaScript as well, but I would rather have jQuery either way.
Thanks!

There's absolutely no need to use jQuery for this purpose. Assuming you do not already have a load event handler:
window.onload = function() {
// your code
};
Or throw it right before the end body tag, or to be more specific anywhere in the source after the submit button - there's nothing really dirty about it.
<script src="your-code.js"></script>
</body>
However, a quick jQuery rewrite..
$(function() {
$('#submit').appendTo('#btn-area').attr('tabIndex', 6);
if ( typeof yourVar != 'undefined' ) {
$('#textarea').val( yourVar );
}
$('#something').css('direction', 'ltr');
});
Did not test.

Here it is:
var sub_html = $('#submit').html();
$('#submit').html('');
$('#btn-area').html(sub_html);
$('#submit').attr('tabindex', 6);
if(typeof _some_var != 'undefined')
{
$('#some-textarea').val(_some_var);
}
$('#something').css('direction', 'ltr');