Category: javascript

How do get the first name “Niranth” with the following json?

[
 {"firstName":"Niranth","lastName":"Padmonkar","wins":12},
 {"firstName":"Nick","lastName":"Tallent","wins":10}, 
 {"firstName":"Kyle","lastName":"Brisson","wins":5}, 
 {"firstName":"Kyle","lastName":"Brisson","wins":5}
]

Here’s what I have tried.

var data = Http.responseText;
var objects = JSON.parse(data)

document.getElementById("Slot1Name").innerHTML = data[0].firstName;

So, I was just tinkering around with some javascript, trying to understand it a bit more. I noticed that there is the window.prompt() script. It opens a little space where you can type in something, in the window. Then, there’s also alert().

We also have var, for variables.

so, naturally, placing something as

var y = window.prompt("Some question");

alert("Something " + y);

would allow you to make a “responsive” answer. However, I noticed that if you closed the window.prompt, it still sends you to the alert, and the place where you added your variable will automatically have the world “null” added to it. I want to know if there is any way to stop that.

Something that could work so that if Close was clicked, then the alert wouldn’t appear.

<button onclick="hi()">
    Hi
</button>

<style>
h1 {
    
    color:red
}

button {
    
color:white;
    background:black;
    font-size:60px;
}

button:hover{
    
    color:black;
    background-color:white;
    cursor:pointer;
}
</style>

<script>
function hi() {
    
    var y = window.prompt("What are your favorite crackers?");
    
// I want to make it so that this doesn't show if the above window prompt wasn't answered. Currently, it only shows "null". 

alert("Oooh! " + y + " are my favorite crackers, too!");
}

</script>

I have a horizontal timeline on my website, I want it to be much larger and stand out. I will put the HTML, CSS, and a pic of how it currently works. I also want to change the color to white on the orange line. Text and content on the whole webpage is fairly large.

.timeline {
  padding: 0px;
  width: 800px;
  height: 20px;
  list-style: none;
  text-align: justify;
  margin: 80px auto;
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(45%, rgba(255, 255, 255, 0)),
    color-stop(51%, rgba(191, 128, 11, 1)),
    color-stop(57%, rgba(255, 255, 255, 0)),
    color-stop(100%, rgba(255, 255, 255, 0))
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(191, 128, 11, 1) 51%,
    rgba(255, 255, 255, 0) 57%,
    rgba(255, 255, 255, 0) 100%
  );
}

.timeline:after {
  display: inline-block;
  content: "";
  width: 100%;
}

.timeline li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #7597de;
  text-align: center;
  line-height: 1.2;
  position: relative;
  border-radius: 50%;
}

.timeline li:before {
  display: inline-block;
  content: attr(data-year);
  font-size: 26px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline li:nth-child(odd):before {
  top: -40px;
}
.timeline li:nth-child(even):before {
  bottom: -40px;
}

.timeline li:after {
  display: inline-block;
  content: attr(data-text);
  font-size: 16px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline li:nth-child(odd):after {
  bottom: 0;
  margin-bottom: -10px;
  transform: translate(-50%, 100%);
}
.timeline li:nth-child(even):after {
  top: 0;
  margin-top: -10px;
  transform: translate(-50%, -100%);
}

<!--StartofTimeline-->
<ul class="timeline">
  <li data-year="2017" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2018" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2019" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2020" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2021" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
</ul>
<!--EndofTimeline-->

Thanks in advance for any and all help.

I want to be able to paint or draw a circle/dot every time the user clicks inside a rectangle. It should be possible to add as many circles/dots as there are clicks and their position changes depending on the coordinates where the click was made. This is the code I’m using:

Circle:

 <circle cy="50" cx="50" r="30" fill="#f"></circle>

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
</style>
</head>
<body>

<div onmousemove="showCoords(event)" onmouseout="clearCoor()"></div>

<p>Mouse over the rectangle above to get the horizontal and vertical coordinates of your mouse pointer.</p>

<p id="demo"></p>

<script>
function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coor = "X coords: " + x + ", Y coords: " + y;
  document.getElementById("demo").innerHTML = coor;
}

function clearCoor() {
  document.getElementById("demo").innerHTML = "";
}
</script>

</body>
</html>

Code in action: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_clientxy2

What should I add in this code so it does what I want?

I have a page which loads the following JS files

• Vue.js
• app.js

The app.js file is compiled using webpack, this includes a NPM component from @chenfengyuan/vue-countdown.

I am trying to display a vue.js countdown component on my page using the following code on my page:

<div class="container" id="app">
    <vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes, seconds }">
        Time Remaining：@{{ days }} days, @{{ hours }} hours, @{{ minutes }} minutes, @{{ seconds }} seconds.
    </vue-countdown>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
    import VueCountdown from '@chenfengyuan/vue-countdown';

    // Vue application
    const app = new Vue({
        el: '#app',
        data: {
            messages: [],
        },
    });
    app.component(VueCountdown.name, VueCountdown);

</script>

When I run this I get a JS error saying:

Uncaught SyntaxError: Cannot use import statement outside a module

Can someone explain what I am doing wrong and how I can correctly import this?

I use nodejs (in a docker-compose container, not sure if that is relevant) to set up a local web app. I would like to use jquery on the client-side to load an HTML file into a div. Unfortunately, it is not working. The initial index.html and the new.html are in the same folder (/frontend/). What am I missing?

Nodejs app:

var app = express();

// home route returns rendered html content
app.get("/", (req, res) => {
  res.sendFile(__dirname + "/frontend/index.html");
});

app.listen(3000, function(){
    console.log('Example app listening on port 3000!');
});

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
        </script>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#imported").load("new.html");
            });
        </script>
    </head>
    <body>
        <div> This is content of the index HTML and below is the imported HTML:</div>
        
        <div id="imported"></div>
    </body>
</html>

Lastly the HTML I want to import new.html:

<HTML>
  <head>
  </head>
  <body>
    <p>This is demo text.<p>
  </body>
</html>

I’m running my javascript code with node.js and am using the request-promise library to generate https requests which return a json blob. So far, I’ve managed to send the request correctly–and I do receive the desired json object in the response, but I’m only seeing the keys, not the values. I want to extract the value for a key called “call_count”. The problem I’m facing is the peculiar structure of the request-promise syntax, which appears to be preventing me from doing what I want to do.

Here’s what the JSON response looks like when I run my query in Postman:

{
  "metric_data": {
    "from": "2021-12-12T23:56:12+00:00",
    "to": "2021-12-13T00:26:12+00:00",
    "metrics_not_found": [],
    "metrics_found": [
        "Mobile/Crash/All"
    ],
    "metrics": [
        {
            "name": "Mobile/Crash/All",
            "timeslices": [
                {
                    "from": "2021-12-12T23:53:00+00:00",
                    "to": "2021-12-13T00:23:00+00:00",
                    "values": {
                        "call_count": 0
                    }
                }
            ]
        }
    ]
  }
}

And here’s my code that generates the request:

const rp = require ('request-promise');

let options = {
  method: 'GET',
  uri: 'https://api.crashCatcher.com/v2/mobile_applications/myAppID/metrics/data.json?names=Mobile/Crash/All&values[]=call_count&summarize=true',
  headers: {
    'User-Agent': 'request-promise',
    'X-Api-Key': 'MY API key goes here'
  },
  json: true // Automatically parses the JSON string in the response
};

rp(options).then(body => console.log(body)).catch(err => console.log(err.name, err.statusCode));

Currently, when I run this code, here’s what I’m getting back:

{ metric_data: 
   { from: '2021-12-13T00:22:04+00:00',
     to: '2021-12-13T00:52:04+00:00',
     metrics_not_found: [],
     metrics_found: [ 'Mobile/Crash/All' ],
     metrics: [ [Object] ] } }

Now, I know I’m getting a JSON object back, and I know I need to do something like:

var myJson = JSON.parse(*body*);

And then something like:

console.log(myJson.metric_data.metrics[0].timeslices[0].values.call_count);

But when using the request-promise syntax, I don’t know how to correctly assign what’s coming back in my response body to a variable that I can then JSON.parse and extract the needed call_count value from.

How to check if a string is a directory? I tried casting and using .isDirectory(), not working for me.
Also tried something like this:

let dirs = input.filter(dir => fs.openSync(dir));

but, of course, i get an error when I pass common string. I tried wrapping it into try-catch, didn’t work.

The website is in Php. I am using datatables.net to export my database table. But, it works fine for one table. But, I have three tables on a web page. How can I export all those three tables into one sheet? Please help.

Script:

<script>
$(document).ready(function() {
    $('#table1').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );


</script>

Pretty much what the title states, I am debating without much experience if I should getElementId on click or as a global var when the page loads.

So, it’s either this:

var cp1 = document.getElementById('cp1');
var olp = document.getElementById('olp');

ob.addEventListener("click", func_ob);
function func_ob() {
  cp1.classList.add('hidden');
  olp.classList.remove('hidden');
}

Or this:

ob.addEventListener("click", func_ob);

function func_ob (element1, element2) {
  document.getElementById(element1).add('hidden');
  document.getElementById(element2).remove('hidden');
}

If I had to make a guess, I would say this is loading time vs run time? I’m not sure, I could really use someone more experienced to break it down for me a bit.

Thanks in advance!

This Code is for a simple Traffic Light, now when running it on the Beaglebone black I receive the warning:”warning: single argument callbacks will be deprecated.please use node-style error-first callbacks: callback(err,response)”. I am unsure of how do do what its asking in my code any help would be appreciated.

var b = require('bonescript');

var red = "p8_13";
var yellow = "p8_15";
var green = "P8_17";
var inputPin = "P8_10";

var switchstatus =0;

b.pinMode(red,b.OUTPUT);
b.pinMode(yellow,b.OUTPUT);
b.pinMode(green,b.OUTPUT);
b.pinMode(inputPin,b.OUTPUT);

var on = b.HIGH;
var off = b.LOW;

setInterval(check,200);

function check(){
    b.digitalRead(inputPin, checkButton);
    }

function checkButton(x){
    if (x.value == 1){
        switchstatus++;
        switch (switchstatus){
            case 1: setTimeout(function
              (){b.digitalWrite(red,on);
                 b.digitalWrite(yellow,off);
                 b.digitslWrite(green,off);},500);
            break;
        case 2: setTimeout (function
              (){b.digitalWrite(yellow,on);},500);
             break;
        case 3: setTimeout (function
              (){b.digitalWrite(red,off);
            b.digitalWrite(green,on);},500);
             break;
        case 4: setTimeout (function
              (){b.digitalWrite(yellow,on)
                 b.digitalWrite(green, on);},500);
             break;
            default: swtchstatus = 0;
            break;
        }
        }
        else if (switchstatus >=5){
            switchstatus = 0;
            callback(err,response);
            }
        }

I have this code:

<p id="new2">{{ $message->message }}</p>

and I want via script to make to display the text inside the paragraph with id ‘new2’ as html

<script> 
document.getElementById("new2").HTML('new2');
</script>

It’s my first time posting – hello everyone!

I’m making an app that’s going to help me memorize geographical data.

I have a map with markers on it, when I click on any of these markers a popup appears in which I have an input. I’m comparing the input value with input dataset to see if my answer was correct or not. The thing is, I would also like to change the color of the marker (ImageOverlay) to green as soon as my answer is correct and red if it’s wrong (as soon as any value appears).

The main problem I have is that those markers are mapped from an object which is fetched from firebase, meaning that every single input has to change the color of the corresponding marker and that marker only.

I hope I explained it clearly. Thank you so much in advance!

displayPins that maps data from a firebase doc:

 const displayPins = doc.map((d) => {
return (
  <ImageOverlay
    className="img-overlay"
    key={d.id}
    bounds={[
      [d.latitude - 2, d.longitude - 2],
      [d.latitude + 2, d.longitude + 2],
    ]}
    interactive={true}
    url={`./${d.shape}`}
  >
    <Popup>
      <input type="text" data-tag={d.name} onChange={valueCompare}></input>
      <button
        onClick={() => {
          console.log(test);
        }}
      ></button>
    </Popup>
  </ImageOverlay>
);});

Input’s onChange:

const valueCompare = (e) => {
const data = e.target.dataset.tag;
const value = e.target.value;
if (data != value) {
  console.log("WRONG");
} else {
  console.log("CORRECT");
}};

CSS

.img-overlay {
  filter: brightness(0) saturate(100%);
}
.img-overlay-wrong {
  filter: invert(10%) sepia(95%) saturate(7496%) hue-rotate(11deg)
    brightness(97%) contrast(120%);
}
.img-overlay-correct {
  filter: invert(69%) sepia(61%) saturate(4725%) hue-rotate(78deg)
    brightness(112%) contrast(128%);
}

I am using the collide2D library in p5.js to detect if my player hits an obstacle. If it does, i wantthe player to have 1 less lives. The problem i’ve run in to is that when i hit an obstacle it keeps removing lives for the whole time i hover over it so i end up with -100 lives when i hover over the whole obstacle.

Code in class Rock(my obstacle):

    isColliding(obj) {
      let hit = collideRectCircle(obj.x - 55, obj.y - 60, 105, 109, this.x, this.y, 130);
      return hit;
    }

code in draw:

  for (let i = 0; i < rocks.length; i++) {
    if (rocks[i].isColliding(unicorn)) {
      lives -= 1
      // if (lives <= 0) {
      //   gameOver();
      // }
    }

I’m building a Football Team Builder with 5 players per team. The idea is to have a select element with the options Formation 1: 1-1-2, Formation 2: 1-2-1, and Formation 3: 2-1-1 (Goalkeepers are not included in the formation).

I build it in a grid with divs of 3×3. See the table as an example:

Now if I select Formation 1: 1-1-2, I only want to display the players according to the selected Formation. That should look like this:

How can I accomplish this for every Select Option with javascript?

CODE

<label for="formation"> Formation </label>
<select id="formation" name="formation">
  <option value="1"> 1-1-2 </option> <!-- 2 Attackers-->
  <option value="2"> 1-2-1 </option> <!-- 2 Midfielders-->
  <option value="3"> 2-1-1 </option> <!-- 2 Defenders-->
</select>

<div class="attackers">
  <div class="card" id="attacker_1"> Attacker 1 </div>
  <div class="card" id="attacker_2"> Attacker 2 </div>
  <div class="card" id="attacker_3"> Attacker 3 </div>
</div>

<div class="midfielders">
  <div class="card" id="midfielder_1"> Midfielder 1 </div>
  <div class="card" id="midfielder_2"> Midfielder 2 </div>
  <div class="card" id="midfielder_3"> Midfielder 3 </div>
</div>

<div class="defenders">
  <div class="card" id="defender_1"> Defender 1 </div>
  <div class="card" id="defender_2"> Defender 2 </div>
  <div class="card" id="defender_3"> Defender 3 </div>
</div>

Here is my JSFiddle: https://jsfiddle.net/dnf7a9c0/4/