Having trouble setting the audio source path in a handlebars file

homepage.html

<script>
function playAudio(audio_src){
    console.log('audio src: ' + audio_src);

    var player = document.getElementById('player');
    player.src = audio_src;
    player.load();
    player.play();
    return false;
}
</script>

<audio id='player' controls autoplay>

</audio>

<a href="#" id = "music-link" onClick= "return playAudio({{this.id}});">Play Music</a>

Upon clicking the link with an ID of "music-link," which contains a valid URL, only a "#" is added to the address bar. The audio element does not start playing as expected.

Answer №1

Eureka! I finally cracked the code. It appears that I was missing single quotes around the parameter I was passing to setAudio():

<a href="#" id = "link" onClick= "return setAudio('{{this.id}}');">Music</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access the OpenWeatherMap API to retrieve the weather forecast for a single time slot within a 5-day period

Utilizing the openweathermap api, I am retrieving a 5-day/3-hour forecast here. The API call provides multiple results for each day with data available every 3 hours. For the full JSON response, you can access it here. Please note that the API key is only ...

In JavaScript, use the following code to replace "(" with "(":

Is there a way to dynamically transform the string "Test(5)" into "Test\(5\)" using JQuery or Javascript? I attempted this approach, but it did not work as expected var str = "Test(5)"; str = str.replace("(","\("); str = str.replace(")"," ...

Dealing with a 409 conflict situation involving a document in Node.js using Nano library

After conducting research, it has come to my attention that there are numerous document conflicts with couchdb. While exploring a potential solution in Updating a CouchDB document in nano, I discovered the following steps: Retrieve the document Store th ...

`I am experiencing issues with the HTTP Post functionality`

Whenever I click on the button displayed in the index.html code, an error occurs when the "$http.post" call is made. The web page then displays an alert saying 'Error!', preventing me from saving the new JSON file due to this issue. I need help ...

Issue with reading custom environment variables in a React application is preventing successful execution

I have an application that combines React with ASP.NET and is run from Visual Studio. However, I am encountering a perplexing error message: Error: The configuration file /config/custom-environment-variables.js cannot be read. Error code: undefined. E ...

The REST API request returns a response code of 0

I have been attempting to make an API call to the Insightly API using this code: var x = new XMLHttpRequest(); x.open("GET", "https://api.insight.ly/v2.2/Projects/Search?status=in%20progress&brief=false&count_total=false", true); x.setRequestHeade ...

Invoking a prototype method executes the incorrect function repeatedly

I'm currently diving into the world of structures and anonymous functions in JavaScript, and after examining various codes and libraries that implement this technique, I decided to give it a shot. However, when attempting to replicate the method they ...

How can I optimize the performance of JS-heavy pages on mobile devices?

As a website owner, I strive to optimize the performance of my site on mobile devices without the need for a separate "mobile-friendly" version or replacing large sections of code. With around 100K of JS code, including jQuery, I am determined to enhance b ...

Issues arise with Google Cloud Builder for Angular when attempting to install Node SASS using the Cloud Builders Community image

Here are the steps I've taken so far: I have set up a Google Cloud Repository I created a Cloud Build Trigger and linked it to my GitHub account and repository, ensuring that the branch name matches exactly as ^staging$ Now, following instructions f ...

AJAX request made to a specific local directory, instead of the usual localhost

Currently, I am working on a project to create a database that can be filtered using various options. My approach was to keep it simple by using HTML for sliders and checkboxes, along with JavaScript/jQuery for filtering the results. This setup allows me t ...

Creating a Selectable Child Form in ReactJS that Sends Data to Parent Form

Sorry for the lack of details, I'm struggling to explain this situation clearly. I'm currently learning ReactJS and JS. In a project I am working on, I have the following requirements: There is a form where users can input text and numbers. The ...

Is it Possible to Update an npm Package to a Latest Version Without Removing package-lock.json?

I have a situation with my package.json where an npm package is specified as ^1.6.0. A couple of weeks ago, when I first installed the package, it was at version 1.7.0, which is currently in my node_modules directory. Now, the package has been updated to ...

Error: The property value supplied for the calc() function is invalid

<App> includes both <Header> and <Content> components. I am attempting to calculate the height of <Content>, which is equal to the height of <App> minus the height of the header. // App.js import { useStyles } from "./Ap ...

Decoding the build ID in NextJS: A step-by-step guide

When working with NextJS, there's the option to generate a build ID as mentioned in the documentation here: https://nextjs.org/docs/app/api-reference/next-config-js/generateBuildId Alternatively, it is also possible to retrieve the build ID based on ...

Dealing with a large amount of HTML content following an Ajax request: best practices

I'm currently using a method that works fine, but I can't stop thinking about whether there might be a better way to achieve the same result. The task at hand is to display a user profile in a modal box. When a user clicks on a button or link, a ...

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

Stop unauthorized entry into JavaScript files

Is there a method to secure JavaScript files from unauthorized access? <script src="JS/MyScript.js" type="text/javascript"> It is crucial that users are unable to access the MyScript.js file. I am seeking advice on how to achieve this. Is it even ...

"Encountered an error while attempting to save data to MongoDB: Unable to insert a single buffer of 10,

I have checked all the following things: IP whitelist Async function try/catch Account password Node.js version However, I am still encountering the error. Code for MongoDB connection: const connectDB = async() =>{ await mongoose.createConnectio ...

AngularJS: How service query data is perceived as an object and therefore cannot be utilized by Angular

When retrieving data from my PHP server page in the factory service, I encountered two different scenarios: If I call a function that returns an array and then use json_encode($data); at the end, Angular throws a resource misconfiguration error due to ...

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...