Issues with HTML/CSS/Javascript functionality occurring on Tablet devices

I recently created a simple HTML page with CSS and JavaScript. The code prompts the user to enter a password, which is then verified by the JavaScript code to display relevant information to the user through alerts. While this code works fine on my desktop, I encountered an issue when trying to run it on my Samsung Tablet - only the HTML content appeared. Below is the current code in use. It is all located in the same folder, but I am considering moving the main HTML file to the tablet's Home directory while keeping the CSS and JavaScript in a separate location for reference.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="dowlingcss.css"/>
    <title>
        Dr. Dowling
    </title>



</head>

<body>  
<script src="dowlingjs.js"></script>    
<img src="parasol.jpg" alt="Parasol Logo" height="250" width="750"> 



        <h1>Welcome Dr. Dowling</h1>


        <p>What is the answer?</P>

    <form>
        <input id="pass">

        <button type="button" onclick="myfunction()">Login</button>
    </form>


</body>

</html>

Javascript

function myfunction()
{


var x, text;

 //Get the value of the input field with id="pass"
x = document.getElementById("pass").value;
var password = x.toLowerCase(); 
// If x is Not = to fatluke
if (password != "fatluke") 
{
    alert("incorrect");
}
else {
    alert("The CD is in room 125 under the bed");
}
}

Answer №1

To see your code in action after the page loads, place it inside this code block.

window.onload = (function () {
// Your code goes here
});

Additionally, experiment with using "window.getElementById()". The functionality may vary depending on your browser and the version of the web view on your tablet.

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

Tips for creating a scrollable sidebar while ensuring that the deeply nested child pop-up element does not adhere to the scrollable properties

In my project, I am using Vue 3 along with Tailwind CSS and Headless UI. The challenge I am facing is making the sidebar navigation scrollable while ensuring that the pop-up menu appears outside the sidebar. As the number of menu items in the sidebar will ...

Tips for effectively segregating various elements within an ng-repeat loop

I'm in the process of creating a website that utilizes ng-repeat to showcase two directives and an element. The second directive and the element are displayed after a certain number of "repeats" (determined by index). These directives appear as rectan ...

Is it possible to dynamically import a Vue.js component based on a prop value?

Currently, I am utilizing the Material design Icons library specifically made for Vue.js. In this library, each icon is a standalone file component within its designated folder. Within my project, I have a separate component called ToolbarButton, which in ...

Executing an HTML parsing function on a series of URLs in the R programming language

After extracting a list of news article URLs from the 'news archives' of a local government agency, totaling around 5000, I developed functions to scrape the title, body, and publication date of each article using rvest. The functions are as foll ...

Text below a stationary header

I need some help with my code using material-ui-next beta.30. The issue I am facing is that the content within mui.Paper is appearing behind the AppBar instead of below it. Here's my current setup: import * as React from 'react'; import * a ...

gRaphael - the struggle of animating a line chart

Encountering an issue with the gRaphael javascript line chart library. Creating a line chart from a CSV file with five columns (# of minutes, time, waiting time, in treatment, closed, in location). Previously drew full chart without animation successfull ...

Position the Bootstrap icon to float to the far right

My icon is always positioned to the right instead of beside the input field. Take a look at the image below: https://i.stack.imgur.com/Bb1eH.png The icon does not align next to the input field. This is my code snippet : <div class="form-horizontal"& ...

Updating information within AngularJS select boxes

On my page, I have 3 select boxes. When a user selects an option in the first select box, I want the options in the second select box to update based on the value selected in the first one. Similarly, I want the options in the third select box to change w ...

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

In the example I have, I apply the same styling to an image and a div. Interestingly, the styling on the div makes the image look significantly better, while on the image itself it appears distorted. What could be causing this discrepancy? Both elements a ...

What is causing my two divs to fail in expanding to the full height of the parent div?

HTML: <div id="main" class="rounded-corners"> <div id="benefits"> <img src="/benefits-heading.png" style="padding: 30px;" /> <div id="corporateside"> ...

Is it possible to restrict the draggable area?

Looking at this JSFiddle example, there is a box that can be dragged around the body. But, is it feasible to restrict dragging only when the user clicks on the purple section identified by the id "head"? $(document).ready(function(){ $( "#box" ).dra ...

Disabling buttons in Angular and displaying error messages for mat-input

I'm facing an issue with a text box and a button. The user inputs a URL into the textbox, and there's a method called isUrlFormatValid() to validate the URL format. The problem is that when the page first loads, the isUrlFormatValid() method aut ...

Unable to add or publish text in CKEditor

In my ASP.NET MVC application, I am struggling to post the updated value from a CKEditor in a textarea. Here is the code snippet: <textarea name="Description" id="Description" rows="10" cols="80"> This is my textarea to be replaced with CKEditor ...

The Axios.get function is mistakenly returning raw HTML instead of the expected JSON data

I'm new to using react js and am currently attempting to retrieve data from the database by utilizing axios.get within the componentDidMount lifecycle method. The code snippet below shows how I am trying to fetch products. My setup involves using reac ...

Can't seem to select the element in Testcafe despite using the correct selector. Any assistance would be greatly valued

https://example.com/image123 await t.click(Selector('.select2-search-choice-close')); Seeking assistance to figure out the issue in this code snippet. Any help would be highly appreciated! ...

Employing PHP for the purpose of updating the content within a <div> element solely when the submit button of a <form> is clicked

I have a unique issue with my website structure. I have an 'index' page that dynamically replaces the content of 'mainContents' when any button in the navigation bar is clicked. The purpose of this design is to reload only the necessar ...

Coloring vertices in a Three.js geometry: A guide to assigning vibrant hues

This inquiry was previously addressed in this thread: Threejs: assign different colors to each vertex in a geometry. However, since that discussion is dated, the solutions provided may not be applicable to current versions of three.js. The latest versions ...

Incorrect date value being sent to MySQL database

I have encountered an issue where the date field in my database is showing 0000-00-00 despite all the other data being added successfully. Here is the code I am using: public class ProposeMeeting1Activity extends Activity { TextView txtview,textv ...

Why is my component not utilizing the implementation in this Jest mock?

I'm currently attempting to run tests on a React component using Jest. Within the component, there is a required module that acts as a factory function returning an object of functions. //tracker.js export default () => { track: click => doso ...

The Vue 3 chart.js does not have a defined chart when clicking

I'm currently in the process of upgrading my website from vue 2 to vue 3. As part of this upgrade, I also needed to update vue-chartjs from version 4 to 5. Unfortunately, it seems that this update has caused some issues with my click event functionali ...