javascript – Page 8183 – Blancer.com Tutorials and projects

How to fix the error in v-model rendering

I have the following fragments in my index.blade.php:

The content section:

.
.
.
<div class="col-12 col-md-12 mb-3">
    <label for="attachment" text-muted">Attachment</label>
    <div class="col-md-12">
        <div>
            <b-form-file
                ref="attachment"
                id="attachment"
                v-model.trim="$v.feedback.upload.attachment.$model"
                placeholder="Click to upload..."
            ></b-form-file>
        </div>
    </div>
</div>
.
.
.

The script section:

.
.
.
var app = new Vue({
    el: '#app',
    data() {
        return {
            'feedback': { 'upload': {'attachment': null} }
        }
   }
})
.
.
.

Everytime I try to load the page, it caused this error as below:

[Vue warn]: Error in render: “TypeError: $v.feedback.upload is undefined”
(found in Root)

I would like to ask what caused the above error because when I commented the v-model.trim="$v.feedback.upload.attachment.$model" line, everything loads fine.
Thank you in advance for any response.

Showing graph on click

I’m working on a project for a time attendance system. Basically, I have a user registration system with admin verification. In the admin panel, I want to show working hours of workers by dates. I’m using Plotly.js for that. The problem is when I call onClick function by clicking button without adding return false; my graph disappears after a few seconds. If I add return false, then the graph shows; however, if I want to change to other worker, then the graph won’t show and it would go wide right.

Here is the code:

    <?php
session_start();
// Include config file
require_once "conn.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="UTF-8">
    <title>Admin pregled korisnika</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
    body{ font: 14px sans-serif;}
    .wrapper {
            width: 420px; padding: 20px;
            text-align:center;
            float: left;
            margin-left: 5%;
            width: 45%;
            margin-top: 10%;
            background-color: #191970   ;
            border-radius: 20px;
            box-shadow:20px 20px 30px grey;
            color:white;
    }
    .right {
        float:right;
    }
    #myPlot{width:40%;overflow:visible;margin-top:10%;}
    #users {
        //font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    #users td, th {
        border: 1px solid #191970;
        padding: 8px;
    }
    
    #users tr{background-color: white;color:#191970}
    
    
    #users th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #191970;
        color: white;
        text-align: center;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #191970;
            position: fixed;
            top: 0;
            width: 100%;
        }

        li {
            float: right;
            height:100%;
            border-left: 1px solid white;
            
        }
        li a {
            display: block;
            color: white;
            font-size: 16px;
            text-align: center;
            padding: 26px 33px;
            text-decoration: none;
            height:100%;
            vertical-align: middle;
        }
        li a:hover{
            background-color: white;
            -webkit-box-shadow:inset 0px 0px 0px 3px #191970;
            -moz-box-shadow:inset 0px 0px 0px 3px #191970;
            box-shadow:inset 0px 0px 0px 3px #191970;
            color:#191970;
            text-decoration: none;
            height:100%;
            vertical-align: middle;
        }
        .dugme{
            margin: auto 3%;
            background-color: #191970;
            color: white;
            padding: 8px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 4px;
            border-style: solid;
            border-width: 3px;
            border-color: #191970;
        }
        .dugme:hover {
            background-color: white;
            color: #191970;
            border-style: solid;
            border-width: 3px;
            border-color: #191970;
            border-radius: 4px;
     }
  </style>
</head>
<body>
    <ul> 
        <a href="#" class="navbar-brand">
            <img src="https://i.imgur.com/E0uimCR.png" height="58" alt="CoolBrand">
        </a>
        <li><b><a href="logout.php">ODJAVI SE</a></b></li>
        <li><b><a href="admin.php">ADMIN</a></b></li>
    </ul>
    
<div class="wrapper">
    
    <h1>Pregled korisnika: </h1>

    <table id = "users">
        <tr>
            <th>Id</th>
            <th>Korisničko ime</th>
            <th>Ime</th>
            <th>Prezime</th>
        </tr>

        <?php
            $query = "SELECT * FROM korisnici WHERE stat = 1 ORDER BY id ASC";
            $result = mysqli_query($conn, $query);
            while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
        ?>
        <tr>
            <td><?php echo $row['id'];?></td>
            <td>
                <form action ="aktivnosti.php" method ="POST">
                    <button class="dugme" onclick="getVrijeme(); return false;" name  ="uname" value = "<?php echo $row['uname'];?>"/><?php echo $row['uname'];?></button>
                    
                </form>
            </td>
            <td><?php echo $row['ime'];?></td>
            <td><?php echo $row['prezime'];?></td>
        </tr>
    

    <?php
            }
            ?>
            </table>
</div>

<?php

if(isset($_POST['uname'])){
    require_once "conn.php";
    $uname = $_POST['uname'];
    $string1 = $string2 = $string3 = "";
    $mysqli_qry = "SELECT * FROM $uname";
    $result2 = mysqli_query($conn,$mysqli_qry);
    if ($br=mysqli_num_rows($result2) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result2)) {
        $string1 = $string1. $row["datum"] . "*";
        $string2= $string2. $row["vrijemerada"] . "*";
    }
}

}
?>

<div class="right"><div id="myPlot"></div></div>
    <script>
        function getVrijeme(){
    var data1 = <?php echo json_encode($string1,JSON_HEX_TAG);?>;
    var data2 = <?php echo json_encode($string2,JSON_HEX_TAG);?>;
    var poz1=[];
    var poz2=[];
    var j=0;
    for(var i=0;i<data1.length;i++){
        if(data1[i]=='*'){
            poz1[j++]=i;
        }
    }
    j=0;
    for(var i=0;i<data2.length;i++){
        if(data2[i]=='*'){
            poz2[j++]=i;
        }
    }
    var radnovr=[];
    var datumi=[];
    radnovr[0]=data1.substring(0,poz1[0]);
    datumi[0]=data2.substring(0,poz2[0]);
    for(i=1;i<poz1.length;i++){
        radnovr[i]=data1.substring(poz1[i-1]+1,poz1[i]);
    }
    for(i=1;i<poz2.length;i++){
        datumi[i]=data2.substring(poz2[i-1]+1,poz2[i]);
    }
    var data = [{
        x: radnovr,
        y: datumi,
        type: "bar",
        }];
    var layout = {
        xaxis: {title: "Datumi"},
        yaxis: {title: "Provedeni sati"},
        title: "Provedeni sati na dnevnom nivou.",
        plot_bgcolor: "white",
        paper_bgcolor: "white"
    };

    Plotly.newPlot("myPlot", data, layout);
}
    </script>

</body>
</html>

Error in Test Api with jest and supertest

I keep getting the error when running my test case by jest :(( ,the idea is to get the token and send it with post testcase. At first i thougt that i did not get the token, but i run node exportToken and it work well. Here is my code. (Ps: For security reason i will not fill my firebaseConfig.)

my exportToken.js

const puppeteer = require('puppeteer');

const axios = require('axios');

const generateToken = async () => {
const browser = await puppeteer.launch({
    headless: true
});

const page = await browser.newPage();

await page.goto('https://example.com');

await page.addScriptTag({ path: 'firebase.js' });

const idToken = await page.evaluate(async () => {
    return await new Promise(resolve => {
        document.body.innerHTML = '<div id="recaptcha-container"></div>';
        const firebaseConfig = {
            apiKey: "",
            authDomain: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
            measurementId: ""
        };
        firebase.initializeApp(firebaseConfig);
        firebase.auth().languageCode = "vi";
        firebase.auth().settings.appVerificationDisabledForTesting = true;

        var phoneNumber = "+84975346330";
        var testVerificationCode = "112233";

        // This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
        // This will resolve after rendering without app verification.
        var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
        // signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
        // reCAPTCHA response.

        firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
            .then(function (confirmationResult) {
                console.log(confirmationResult)
                confirmationResult.confirm(testVerificationCode).then((result) => {
                    // User signed in successfully.
                    const user = result.user;
                    user.getIdToken().then((idToken) => {
                        console.log(idToken)
                        resolve(idToken)
                    });
                }).catch((error) => {
                    resolve(error)
                });
            }).catch(function (error) {
                resolve(error)
            });
    })
})

await browser.close();

return idToken;
};

module.exports = generateToken();

my test.js

const request = require('supertest');

const axios = require('axios');

const generateToken = require('./exportToken');

const server = request.agent("http://localhost:9000");

describe("Unittest", function () {

it("Post /sessionLogin", async () => {

    const MyToken = await generateToken;

    server
        .post("/sessionLogin")
        .expect(200) // THis is HTTP response
        .send({ idToken: MyToken })

});
})

I run node to get the Token and it work, and then use jest to test case but it keep showing this error.

C:UsersAdminDesktopDynocredit_vn_backend-test> npm test
> jest

FAIL  test/test.js (5.086 s)
Unittest
× Post /sessionLogin (3710 ms)

● Unittest › Post /sessionLogin

ENOENT: no such file or directory, open 'C:UsersAdminDesktopDynocredit_vn_backend- 
testfirebase.js'



Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        5.242 s
Ran all test suites.
Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. 
Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

Unexpected output from what is expected to get in javascript

I am getting a durres output instead of the constantine, is there anything I am missing out? Here’s the photo

HTML:

  '''<div class="gnrt">
     <div class="cntnr">
       <select id="countryz" name="countryz">
         <option value="random">Random</option>
          <?php foreach($region['regions'] as $regn => $rgn){ ?>
           <option value="<?php echo $rgn['code'];?>"><?php echo $rgn['name'];?> (Region) 
 </option>

         <?php } foreach($countryarr1['countries'] as $countkey1 => $countname1){?>
           <option value="<?php echo $countname1['code'];?>"><?php echo $countname1['name'];?> 
  (Countries)</option>

            <?php } foreach($countrysts['countrySets'] as $cntrysts => $sts){ ?>
           <option value="<?php echo $sts['code'];?>"><?php echo $sts['name'];?> (Set)</option>
         <?php } ?>
        </select>
       </div>

     <div id="citycont" class="citycont">
     <?php foreach($countryarr1['countries'] as $countkey1 => $countname1){?>
        <div class=<?php echo $countname1['code'];?>>
         <select id="citied" name="citytest">
         <?php foreach($countname1['cities']['options'] as $cntrykey2 => $cntrys){?>
           <option value="<?php echo $cntrys['code'];?>"><?php echo $cntrys['code'];?></option>
         <?php } ?>
         </select>
       </div>
       <?php } ?> 
     </div>'''

Javascript:

 ''' <script type="text/javascript">
$(document).ready(function(){
  $('#countryz').bind('change', function(){
    var trycountry = $('#countryz').val();
    var uzer = "qwerty";
    var password = "password";

      if(trycountry=="ftl" || trycountry=="mesh1" || trycountry=="mesh2" || trycountry=="courir" || trycountry=="nikena" || trycountry=="nikena" || trycountry=="nikeas"){

        if(trycountry=="us" || trycountry=="mx" || trycountry=="cu" || trycountry=="pr" || trycountry=="gt" || trycountry=="ni" || trycountry=="nikena") {
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "us.proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "185.193.157.60";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
          });
        }
      
        else if(trycountry=="sg" || trycountry=="id" || trycountry=="my" || trycountry=="ph" || trycountry=="vn" || trycountry=="th" || trycountry=="nikeas"){
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "sg.proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "51.79.228.223";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
          });
        }

      
        else if(trycountry=="au" || trycountry=="nz" || trycountry=="pg"){
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "au.proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "51.161.196.188";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
          });
        }
      
        else{
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "91.239.130.17";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_set-" + trycountry);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
          });
        }
      }
       else{
      $(document).ready(function(){
      $('#citied').bind('change', function(){
        var elements = $('div.citycont');
        var trycity = $(this).val();

        if(trycountry=="us" || trycountry=="mx" || trycountry=="cu" || trycountry=="pr" || trycountry=="gt" || trycountry=="ni" || trycountry=="nikena") {
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "us.proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "185.193.157.60";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
          });
        }
      
        else if(trycountry=="sg" || trycountry=="id" || trycountry=="my" || trycountry=="ph" || trycountry=="vn" || trycountry=="th" || trycountry=="nikeas"){
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "sg.proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "51.79.228.223";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
          });
        }

        else if(trycountry=="au" || trycountry=="nz" || trycountry=="pg"){
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "au.proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "51.161.196.188";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
          });
        }
      
        else{
          $(document).ready(function(){
          $('#hst').bind('change', function(){
          var iptype = $('#hst').val();
            if(iptype=="dns"){
              var setcountry = "proxy.iproyal.com";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }else if(iptype=="iphst"){
              var setcountry = "91.239.130.17";
                $(document).ready(function(){
                  $('#tpz').bind('change', function(){
                  var httptype = $('#tpz').val();
                  if(httptype=="http|https"){
                    var texts = "12323";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }else if(httptype=="socks5"){
                    var texts = "12325";
                    $('#foruse').val(setcountry + " : " + texts + " : " + uzer + " : " + password + "_country-" + trycountry + "_city-" + trycity);
                  }
                  }).trigger('change');
                });
            }
          }).trigger('change');
        });
        }
      }).trigger('change');
      });
      }

  }).trigger('change');
});

”’

Typing this randomly, says I have a lot codes…………………………………………………………………………………………………………………………..

How to run shell command from javascript client-side?

I have the simplest program: 1 HTML file, 1 CSS file, and 1 JS file, just run directly on my own computer. And all I’m trying to do is that when you press a button in the program, one single shell command (Windows) is run directly on the computer. This will generate file, which in turn will be used further inside the program.

It appears you cannot access your local files through JS alone, so I installed NodeJS (which is completely new to me). But I still can’t get it to work that way either.

The only way I finally got NodeJS to host the HTML page in a way that the JS and CSS files also work, is by copying the code I got here: https://stackoverflow.com/a/13635318. (I called it server.js).

But I still haven’t been able to find a way to call upon server.js while client-sided to run that shell command. Some posts suggest using AJAX for this, like here https://stackoverflow.com/a/53897335, but I haven’t been able to find any way to successfully catch that in server.js.

How do I convert this to a functional component?

I’m trying to practice reactjs and how can I convert this class component to a functional component?

     handleChange = (e) => {
    const { name, value } = e.target;
    this.setState( {
        [name] :value
    })
  };

So far, I could only do this and I’m quite lost when it comes to the this.setState

 const handleChange = (e) => {
    const { name, value } = e.target;
  };

null is not an object (evaluating ‘user.uid’)

I want to retrieve a field value of a document in Users collection by referencing it via the where condition from Firestore. I use the context api to pass the user object of the logged in user in my app. I get this error that user.uid is null. I can’t spot where the mistake is. I have added the relevant piece of code.

EditProfile.js

const EditProfile = () => {
  const { user } = React.useContext(AuthContext);

  const [name, setName] = React.useState();

  React.useEffect(() => {
    const userid = user.uid;
    const name = getFieldValue("Users", userid);
    setName(name);
  }, []);

  
};

export default EditProfile;

passing and getting value via context

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = React.useState(null);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

const AppStack = () => {
  return (
    <AuthProvider>
      <BottomTab.Navigator>
        <BottomTab.Screen
          name="ProfileStack"
          component={ProfileStack}
        />
      </BottomTab.Navigator>
    </AuthProvider>
  );
};

export default AppStack;

ProfileStack.js

export const ProfileStack = ({ navigation }) => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Profile"
        component={Profile}
      />
      <Stack.Screen
        name="EditProfile"
        component={EditProfile}
      />
    </Stack.Navigator>
  );
};

getFieldValue function

export const getFieldValue = (collection, userid) => {
    firestore()
      .collection(collection)
      .where("userid", "==", userid)
      .get()
      .then((querySnapshot) => {
        if (querySnapshot.size === 0) {
          return "";
        }
        if (querySnapshot.size === 1) {
          const { name } = querySnapshot[0].data();
          return name;
        }
      })
      .catch((e) => console.log(e));
  };

Uncaught (in promise) ReferenceError: getNFTNames is not defined

I am not so familiar with javascript, and i’m using someone else’s code, and added some new functions with parameters, and it’s throwing the following error

It’s somehow not recognizing the functions with parameters.

Uncaught (in promise) ReferenceError: getNFTNames is not defined

window.App = {
 start: function() {
  var self = this;

  Voting.setProvider(web3.currentProvider);
  NFTContract.setProvider(web3.currentProvider);
  self.populateNFTs();
 },

populateNFTs: function() {
  var self = this;
  NFTContract.deployed().then(function(contractInstance) {
    contractInstance.allNFTs.call().then(function(NFTArray) {
      for(let i=0; i < NFTArray.length; i++) {
        NFTs[NFTArray[i]] = "tokenID-" + i;
      }
      console.log("NFT Array = " + JSON.stringify(NFTs));
      self.setupNFTRows();
    })
  })
 },

 setupNFTRows: function() {
  Object.keys(NFTs).forEach(function (NFTid) { 
    $("#NFT-rows").append(
      `<tr id='NFT_ID_${NFTid}'>
          <td>NFT_ID_${NFTid}</td>
          <td>${this.getNFTNames(NFTid)}</td>
          <td>${this.getCreators(NFTid)}</td>
         </tr>`);
  });
},

getNFTNames:function (nftid){
  NFTContract.deployed().then(function(contractInstance) {
    contractInstance.getNFTname.call(nftid).then(function(v) {
      return v.toString();
    });
  });
}

}

Installing Node.js Using JavaScript Code? [closed]

I’ve been programming for decades but am new to JavaScript.

I recently began working on a new project which I want to be able to run
on Linux, Windows and Apple. After some research I decided to use HTML
and JavaScript. I was thinking/hoping I would be able to do the entire
project using only client-side coding, but it doesn’t appear like that’s
going to be the case.

I’ve encountered a point where I need to copy/move files from one location
to another.

What are my options? Node.js?

If Node.js is my only or best option, is it possible to download and
install Node.js using client-side JavaScript code? (Many of the people
who will be using the system will be computer-challenged and/or elderly.
It may be daunting for them if they need to install Node.js themselves.)

I appreciate any help.

How to write a JS function that is used by .html files in different folders?

I’m trying to call a function on my XAMPP server that dynamically changes the current stylesheet of an HTML document. This is what I’m currently doing:

document.getElementById("color-scheme").href = "../colors.css";

The colors.css is obviously one folder above the page that is using this code, hence the “../”. Now my problem is that there are dozens of pages in different folder levels that all need to access this colors.css to set the color-scheme. For example:

index.php (same folder)
news/index.php (one folder in)
news/january/index.php (two folders in)
… and so on.

This means that every page that isn’t exactly one folder above colors.css doesn’t work as it can’t find the file at “../colors.css”, as the server seems to go back beyond the root to find the file.

I feel like manually adding “../” according to the folder’s level would be very bad coding, so I don’t want to do this:

function LoadColorScheme(var level) {
   var path = "";
   for (var i = 0; i < level; i++) 
      path += "../";
   path += "colors.css";
 }

Is there a better way to do this?

Algebraic relation between HTML inputs and updating both of the inputs when user interacts with one of them

I am trying to create 2 inputs dependant on each other like:

<input type="number" name='field1'>
<input type="number" name='twoTimesField1'>

When user interacts with first input i would like to update the other or vice versa.
What is the proper way of achieving this kind of behaviour?

How to iterate through an object with key and get the value

So I am not sure why I having such a difficult time with this, but I have an object I am trying to map over to get a value from it.

For example:

let obj = {
      "lyzjmpkvbtocygakcoxu": {
        "label": "Show Time",
        "hour": "12",
        "minute": "00",
        "period": "p.m.",
        "add_time": "enabled",
        "bdlmynfythqgyzrhruhw_add_date": "December 01, 2021",
        "bdlmynfythqgyzrhruhw_stock": ""
      },
      "eueuuzvkteliefbnwlii": {
        "label": "Show Time",
        "hour": "05",
        "minute": "00",
        "period": "p.m.",
        "add_time": "enabled",
        "brtmypzvuooqhvqugjbj_add_date": "December 02, 2021",
        "brtmypzvuooqhvqugjbj_stock": ""
      }
    }

I want to be able to get this:

December 01, 2021, December 02, 2021

I was able to do this to get the values and key for “add_time”, however what I want is values for key containing the “…_add_date”.

Object.keys(obj).reduce(
          (acc, elem) => {
            acc[elem] = obj[elem].add_time;
            return acc;
          },
          {},
        );

How to get data from another page html using the same script.js?

I’m really struggling with this, I’m using fetch to get data from rest api countries, and displaying some countries in index.html. My case is that when I click on a country, I want to move to detail.html and display more data from the country I clicked on. I don’t know how to deal with this. I tried to use the same script.js in detail.html and hoped to get the e.target from the addEventListener, but the code collided as a result. It would be much easier if I created a modal in index.html, but instead of doing that I want to move to a different page and get my skills increased a bit. Should I use a backend in this case?

If you’d like to see the preview site or the codes here are the links site, code

React Redux Image Wont load

So this could honestly be as simple as just over looking it and staring for so long and being new to react but on my section component I’m loading in my backgroundImg prop wont load the image and I cant figure it out. My pictures are in the public folder and my code is in the src components folder

Also, I can get images to load in the file just not when I’m calling them through prop

Home.js This is where I am calling my component and trying to load the file in through the prop type

import React from 'react'
import styled from 'styled-components'
import Section from './Section'


function Home() {
    return (
        <Container>
            <Section 
                title="Model S"
                description="Order Online for Touchless Delivery"
                backgroundImg='/public/pictures/model-s.jpg'
                leftBtnText="Custom Order"
                rightBtnText="Existing Inventory"
            />
            <Section 
                title="Model E"
                description="Order Online for Touchless Delivery"
                backgroundImg=".Picturesmodel-e.jpg"
                leftBtnText="Custom Order"
                rightBtnText="Existing Inventory"
            />
            <Section />
            <Section />
            
        </Container>
    )
}

export default Home

//Home and styled help you stlye the component without using css

const Container = styled.div`
    height: 100vh;
`

Section.js The component for the Screen

import React from 'react'
import styled from 'styled-components'


//props are just parameters you can set when calling the component

function Section(props) {
    
    return (
        <Wrap bgImg={props.backgroundImg}>
            <ItemText>
                <h1>{props.title}</h1>
                <p>{props.description}</p>
            </ItemText>
            <Buttons>
                <ButtonGroup>
                    <LeftButton>
                        {props.leftBtnText}
                    </LeftButton>
                    <RightButton>
                        {props.rightBtnText}
                    </RightButton>
                </ButtonGroup>
                <DownArrow src='/Pictures/down-arrow.svg' />
            </Buttons>
        </Wrap>
    )
}

export default Section

const Wrap = styled.div`
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
`

const ItemText = styled.div`
    padding-top: 15vh;
    text-align: center;
`

const ButtonGroup = styled.div`
    display: flex;
    margin-bottom: 30px;
    @media (max-width: 786px){
        flex-direction: column;
    }
`

const LeftButton = styled.div`
    background-color: rgba(23, 26, 32, 0.8);
    height: 40px;
    width: 256px;
    color: white;
    display: flex; 
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    opacity: 0.85;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    margin: 8px;
`

const RightButton = styled(LeftButton)`
    background: white;
    opacity: 0.65;
    color: black;
`

const DownArrow = styled.img`
    margin-top: 20px;
    height: 40px;
    overflow-x: hidden;
    animation: animateDown infinite 1.5s;
`

const Buttons = styled.div`

`


Thanks for the help.

javascript sum of json objects

After trying to find many ways to do it here, I’m stuck with this.

I have a Json object and would like to sum all the results.
This code is showing all amounts, but not showing their sum in the end.

var str = e.data.substring(e.data.indexOf("["));
    if (IsJsonString(str)) {
        var body = JSON.parse(str);
        var data = body[1];

        if(data && data.id == "ID" && data.some.string == "string"){

            var fields= [
                data.some
              ];
              var sum = fields.reduce(function(acc, val){
                return (+acc.amount) + (+val.amount);
              }, {amount: 0});
              console.log(sum);
        }
    }