Combining HTML and JavaScript for seamless integration

I'm having trouble combining two HTML/CSS and JS codes together.

The first snippet of code is a simple button that changes text on click:

<html>
<head>

<script type="text/javascript">

function myTest(btnID)
{
document.getElementById(btnID).value="After";
}

</script>

</head>
<body>

<input type="button" name="toggleBtn" id="toggleBtn" onclick="myTest('toggleBtn')"   value="Before" >

Now, I want to merge it with the following JavaScript code:

<script type="text/JavaScript">
<!--
redirectTime = "5000";
redirectURL = "http://cpanel.hostinger.ae";
function timedRedirect() {
setTimeout("location.href = redirectURL;",redirectTime);
}
//   -->
</script>

<div style="background-color:green;padding:5px;width:110px;cursor:pointer;"
onclick="JavaScript:timedRedirect()">
By M.A JS Code
</div>

Is there a way to make the button change text when clicked and then automatically redirect the page after a certain time?

javascripthtmlcss

Answer №1

To enhance your current function, insert the following code snippet: Access jsFiddle Example

<html>
    <head>

        <script type="text/javascript>

            function myTest(e) {
                e.value = "After";
                redirectTime = "5000";
                redirectURL = "http://cpanel.hostinger.ae";
                setTimeout(function(){location.href = redirectURL;}, redirectTime);
            }

        </script>

        </head>
        <body>

            <input type="button" name="toggleBtn" id="toggleBtn" onclick="myTest(this);" value="Before">

        </body>
</html>

Answer №2

Is this the type of coding you are looking for?

<html>
<head>

<script type="text/javascript">

function updateButton(btnID)
{
   document.getElementById(btnID).value="Clicked";

   redirectTime = 5000;
   redirectURL = "http://example.com";
   (function(redirectTime, redirectURL) {
      setTimeout("location.href = redirectURL;",redirectTime);
   })(redirectTime, redirectURL);
}

</script>

</head>
<body>

<input type="button" name="toggleBtn" id="toggleBtn" onclick="updateButton('toggleBtn')" value="Click Me" >

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

Estimating Dates Using Javascript and JSON

I am currently working on visualizing some data I have. You can view the fiddle here: http://jsfiddle.net/hohenheim/6R7mu/10/ As part of this visualization, I have extracted a small subset of the JSON data that I am trying to represent, named data2. Here ...

javascriptjsonnvd3.js

Google Script: How to automatically open a newly created text document after its creation

I decided to try out this script for generating Google text documents from Google Spreadsheet data. However, I noticed that the new text document created from a template is always placed in the default folder. This means that I have to manually locate the ...

javascriptgoogle-apps-scriptgoogle-sheets

Refresh the display once the AJAX request is successful and the data is retrieved

I'm new to the development world and currently working on a recipe search application that generates a list of recipes based on user-input ingredients. I've decided to dive into Angular to streamline my code and improve its organization. After s ...

javascriptjqueryangularjsajax

Obtain the name of the current view in ASP.NET MVC 5 using Razor on the .cshtml side

As a student who is new to ASP.NET MVC and coming from ASP.NET Web Forms, I am accustomed to it. Here is the list: <ul class="sidebar bg-grayDark"> <li class="active"> <a href="@Url.Action("Index", "Home")"> < ...

c#cssasp.netasp.net-mvcrazor

I'm interested in learning how to implement a model loaded event in Aframe.js. Can someone provide me with a

Query: Hello, I am trying to implement a loading screen in Aframe. I came across the following page which talks about object loading, but I am having trouble understanding how to use it... <a-asset-item class="model" id="back" src="./models/back.obj ...

javascriptthree.jsaframe

Accessing JSON object with Javascript

I've been struggling with this code snippet and despite looking at similar posts, I can't seem to get it right. var obj2 = JSON.parse('{"venue_data": {"venue_id":"25", "description":"Space Cafe", "venue_type ...

javascriptarraysjsondom

What is the best way to navigate to a different page when scrolling in React Router?

I am working on a design that includes a landing page with 100vh and 100vw dimensions. I want it to transition into another page as the user scrolls down. How can I achieve this using React hooks and React Router? Any guidance or suggestions would be high ...

javascriptreactjsreact-routerreact-hooks

Why isn't my JavaScript Alert displaying a string message?

I'm feeling a bit puzzled and I have a feeling there must be an easy solution, so please lend me a hand. Here's the code snippet that is causing me some confusion: $new = "1"; <script language="javascript"> alert(<?php echo $new; ...

javascriptphp

Tips for choosing a drop-down menu option without an identifier using Selenium in Python

I am trying to choose an element/item from a drop-down menu in Python and Selenium without using an id element. Here is the HTML code snippet: <mbo-transaction-mode-select mode="filters.mode" class="ng-isolate-scope"> <select class="form-con ...

pythonhtmlselenium

Tips on utilizing ag-grid's built-in column filtering to sort merged values

I am having trouble with the column filtering in my table. When I combine values to display as a title in the title column, the built-in column filter is not returning any results when I try to search for something. I'm wondering what I might be doing ...

javascriptangularjsag-grid

Customizing Semantic UI Navigation Menu Styles

For the first time, I am incorporating semantic-ui into my React application. The specific package I am working with can be found here: To display my header, I am using the following code: <Menu className='header' > <Containe ...

cssreactjssemantic-uisemantic-ui-react

Creating a dropdown menu and adjusting the content below

Feeling stuck in one place with my code here: link The side navbar animation is almost what I want, but clicking one option opens all of them. Hoping for a similar effect like this page: link $(document).ready(function() { $('.interfejs, .proces ...

jqueryhtmlcss

Exploring with jQuery's .find() and bringing life to elements with

I'm currently working on animating a thermometer for my project. Here is the JavaScript method I have written for this purpose: function setScoreBar(score) { var scoreBar = document.getElementById("dynamicScoreBar"); // var scoreBar = $(score ...

javascriptjquery

Obtaining the value of a specific dynamic `<td>` element using jQuery

My page layout resembles this design (I am unable to post an image due to insufficient points, so I have it hosted elsewhere) My goal is for jQuery to identify the specific email when a user clicks on the delete button. For instance, if a user clicks on & ...

javascriptjqueryjquery-selectors

The AJAX request for JSON data is functioning correctly in Firefox, but is experiencing compatibility issues with other web browsers

I recently completed a PHP page that generates a valid JSON document. The jQuery code used to fetch and display the data is quite straightforward: $.ajax({ url: "http://localhost:8888/rkm/json-jc", dataType: "json", success: function(data) { ...

javascriptjqueryajaxjsonfirefox

Strange behavior of focus()

My objective is to launch a popup containing an input field and automatically bring focus to that input. I have attempted using $('#input').focus(), $('#input').first().focus(), and $('#input')[0].focus(), but unfortunately, ...

javascriptjqueryhtmlsetfocusautofocus

In Chrome Inspector console, a never-ending JavaScript loop is triggered by a modification in the htaccess file to create pretty URLs, specifically when

Brand new to the world of .htaccess modifications and handling clean URLs. I currently have a php/bootstrap/mysql/javascript page at: http://localhost/modules/posts/questions_all.php. I am interested in redirecting pages such as http://localhost/modules/ ...

javascript.htaccessbootstrap-4pretty-urls

Incorporate a dialogue box utilizing jQuery with dynamically created HTML elements using jQuery

Is it possible to add a jQuery dialog using a string containing HTML code stored in a variable? I have tried out some code, and you can view it here. $("#remove-post").dialog({ autoOpen: false, height: 'auto', width: 'auto&a ...

javascriptjqueryhtml

Showing real-time results of adding or deleting an operation on a web page using AngularJS and Spring MVC

I have created an employee form that allows users to add, search for, and delete employee details. Within the controller, I have separate functions for these operations. After adding or deleting an employee, I want the result list to update dynamically (sh ...

javascriptangularjsspringspring-mvcmodel-view-controller

Generate a dynamic key object in Angular/TypeScript

I am working with an object called "config" and an id named "id". My goal is to create an array of objects structured like this: [ "id" : { "config1: ... "config2: ... "config3: ... } "id2" : { "config ...

javascriptangulartypescript