locked
problem of integration css style in javascript code in html or aspx page RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-458598543 posted

    I would integrate css style in javascript code in html or aspx page.

    a sample of code is the following :

    <script>
function_load()
{
var element_div = document.getElementById("div_point_eetoile_espace");
element_div.setAttribute("style","width:10px");
element_div.setAttribute("style","height:10px"); 
element_div.setAttribute("style","background-color:yellow");
element_div.setAttribute("style","");
element_div.setAttribute("style","left:144px"); 
element_div.setAttribute("style","top:144px");
}
</script>

<body onload="function_load()">
<div id="div_point_eetoile_espace"></div>
</body>

    the code is unfunctionnal. could you help me.

    thanks you.

    M.A.

    Thursday, April 29, 2021 7:27 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    In JavaScript functions are defined using the "function" key word.

    function function_load()
{
    var element_div = document.getElementById("div_point_eetoile_espace");
    element_div.setAttribute("style","width:10px; height:10px; background-color:yellow; ; left:144px; top:144px");
}

    Reference documentation

    https://www.w3schools.com/js/js_functions.asp

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 29, 2021 8:12 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-458598543 posted

    I resolved the problem, it was a problem of variable declaration. I declare (init) var_x_absysce above the function function_load(){} and it's ok.

    Truly yours.

    M.A.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 29, 2021 9:59 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    In JavaScript functions are defined using the "function" key word.

    function function_load()
{
    var element_div = document.getElementById("div_point_eetoile_espace");
    element_div.setAttribute("style","width:10px; height:10px; background-color:yellow; ; left:144px; top:144px");
}

    Reference documentation

    https://www.w3schools.com/js/js_functions.asp

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 29, 2021 8:12 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-458598543 posted

    I'm tryied your code and it's ok meanwhile the problematic that I would to set a variable in the setting of css style, as exemple : 

    <script>

var var_x_absysce = 144; 


function function_load()
{
setInterval('timer()', 2220);
    var element_div = document.getElementById("div_point_eetoile_espace");
    element_div.setAttribute("style","width:10px; height:10px; background-color:yellow; ; left:144px; top:144px");
}
function timer()
{
var_x_absysce = var_x_absysce + 20;
element_div.setAttribute("style","left:" + var_x_absysce + "px;top:144px");
}

</script>

<html>

<body onload="function_load()">

<div id="div_x_1" style="z-index: -1; width: 432px; height: 432px; background-color: rgb(0,0,0);">
<div id="div_point_eetoile_espace" style="z-index: 2;">
</div>
</div>

</body>

</html>

    The code above is not functionnal.

    Truly yours.

    M.A.

    Thursday, April 29, 2021 9:34 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-458598543 posted

    I resolved the problem, it was a problem of variable declaration. I declare (init) var_x_absysce above the function function_load(){} and it's ok.

    Truly yours.

    M.A.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 29, 2021 9:59 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    There are several fundamental issues with your code.  In my opinion, you should learn how to use troubleshoot and debug code.  

    var var_x_absysce = 144;
var myVar;
var element_div = document.getElementById("div_point_eetoile_espace");

function function_load() {
    myVar = setInterval(timer, 2000);        
    element_div.setAttribute("style", "width:10px; height:10px; background-color:yellow; ; left:" + var_x_absysce + "px; top:144px");
}

function timer() {
    console.log("timer");
    var_x_absysce = var_x_absysce + 20;
    element_div.setAttribute("style", "width:10px; height:10px; background-color:yellow; ; left:" + var_x_absysce + "px; top:144px");
}

    Thursday, April 29, 2021 9:59 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    I resolved the problem, it was a problem of variable declaration. I declare (init) var_x_absysce above the function function_load(){} and it's ok.

    There are more issues with your code than that...

    Thursday, April 29, 2021 10:01 PM