How to use getelementbyId javascript in outsystems

Hi,

I'm unable to implement getelementbyId from javascript in outsystems. Please help how to implement following code in outsystems


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>

Filipe Alves wrote:

Hello,

Check this links

https://www.outsystems.com/forums/discussion/21083/make-a-div-scroll-to-bottom/

https://www.outsystems.com/forums/discussion/35456/how-to-insert-javascript-for-a-button/

Thank you Filipe Alves for giving this information.With this information I may get the solution for my problem. 


Hi Team, 


I am very new to Outsystems, as I am trying to implement the JavaScript function to the Button which need the toggle the ID value of the local variable defined from true to false and vise versa, Onclick of the button. Can anyone help me with it.

Hi Manasa Ks,

There's no direct way of defining the id attribute on an HTML element in OutSystems, the platform automatically assigns generated ids for every OutSystems widget that has its Name property assigned.

What you can do is obtain this id at runtime (each named widget will have an Id runtime attribute you can only read) and inject it in your Javascript code.

Hope this helps!

Hi Jorge,


Thank you for the response,

I am able to toggle the button value even by using the <widget.Id> . can you please give me any sample for it, if possible.


Hi everybody!

How to getelementbyId of Container.

I'm try but error:

SyntaxEditor Code Snippet

function tableCreate() {
  var bodyAAA = document.getElementById('#"+ThanhPV12.Id+"');
  var tbl = document.createElement('table');
  tbl.style.width = '100%';
  tbl.setAttribute('border', '1');
  var tbdy = document.createElement('tbody');
  for (var i = 0; i < 3; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < 2; j++) {
      if (i == 2 && j == 1) {
        break
      } else {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode('\u0020'))
        i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
        tr.appendChild(td)
      }
    }
    tbdy.appendChild(tr);
  }
  tbl.appendChild(tbdy);
  bodyAAA.appendChild(tbl)
}


pls help me.


Thanks

Hello Pham.

document.getElementById('#"+ThanhPV12.Id+"');

Why are you concatenating "#"?

The ThanhPV12.Id already returns the exact string you need.


Nuno Reis wrote:

Hello Pham.

document.getElementById('#"+ThanhPV12.Id+"');

Why are you concatenating "#"?

The ThanhPV12.Id already returns the exact string you need.



Hi Nuno Reis.

I view in "https://www.outsystems.com/forums/discussion/21083/make-a-div-scroll-to-bottom/"

Thanks you sp.

--------------

I have found the cause of the error above.
But I could not handle it. Because the word "Container" to "DIV" name has been changed.

Can you help me!


Thanks


You are mixing two worlds.

The Id you get from ThanhPV12.Id and can use only in JavaScript.

The Name is to be used in OutSystems. For instance, when you do a Refresh.


To hide/show a button you can do it only with Javascript, OR editing the style property in extended properties and doing a Ajax Refresh in OutSystems. No need to use both.

If you are using JS and feel comfortable with it, go with it.