When the menu is selected, I would like for this div to both appear on the screen and slide

I need this div to be visible and move up when a menu item is selected. Can anyone provide a solution for this? Thank you in advance.

<html><head>
<script type="text/javascript">

<!--
var divobject = null;
function init(id){
   divobject = document.getElementById('id');
   divobject.style.left = '25px'; 
   divobject.style.top = '580px';
   divobject.style.visibility = 'hidden';
}
function moveUp(id){
   divobject = document.getElementById(id);
   divobject.style.visibility = 'visible';
   divobject.style.left = '25px';
   divobject.style.top = parseInt(div.style.top) + 0 + 'px';
   divobject.style.position = 'absolute';
}
document.onclick =init; 
window.onload =init;
//-->
</script>
</head>
<body>
<a href="javascript:void(moveup('1'));">show div</a>
<div id="1">tytt</div>
</body>
javascript

Answer №1

Avoid using IDs that begin with numbers

Update your code as follows:

function init(id){
   divobject = document.getElementById(id);

Remove the following lines because no arguments are being passed to functions, which will result in an error since id will be undefined:

document.onclick =init; 
window.onload =init;

If you wish to modify the existing style top value, use a numeric value instead of 0 while enclosing it in braces for addition rather than string concatenation:

divobject.style.top = (parseInt(divobject.style.top) + 0) + 'px';

Answer №2

It seems that there are some issues in your code that need to be addressed. I was able to make it work by making some changes, but you may want to consider a different approach if you want to create a menu-style control.

  • Consider using style classes and toggling them dynamically using classList
  • Make sure the element id starts with letters.
  • Note that methods are case sensitive.
  • The id is a variable and should not be enclosed in commas.

Don't forget to utilize developer tools and debugger for troubleshooting.

<html><head>
<script type="text/javascript">

<!--
var divobject = null;
function init(id){
   divobject = document.getElementById(id);
   divobject.style.left = '25px'; 
   divobject.style.top = '580px';
   divobject.style.visibility = 'hidden';
}
function moveup(id){
   divobject = document.getElementById(id);
   divobject.style.visibility = 'visible';
   divobject.style.left = '25px';
   divobject.style.top = parseInt(div.style.top) + 0 + 'px';
   divobject.style.position = 'absolute';
}

window.onload = function(e) {                
    init("elt");
}
//-->
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="moveup('elt')">show div</a>
<div id="elt">tytt</div>
</body>

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

Achieving a similar functionality to Spring Security ACL in a Node.js AWS Lambda serverless environment

I am tackling a javascript challenge that has me stumped. Specifically, I am trying to figure out how to implement fine-grained authorization using an AWS serverless approach. In Spring security ACL, users can be banned from specific tasks at the instanc ...

javascripttypescriptaws-lambdaauthorizationaccess-token

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

How to Eliminate the Border on the Final Item within a React List

Hi everyone, I need help with removing the border of the last item in an unordered list when the list reaches a certain size. I initially tried this: document.querySelector('.employee-list-item:last-child').style.border = "none"; However, I enc ...

javascriptreactjs

The removeAttribute function has the ability to remove the "disabled" attribute, but it does not have the capability to remove

When it comes to my JavaScript code, I have encountered an issue with two specific lines: document.getElementsByName('group')[0].removeAttribute('disabled'); document.getElementsByName('group')[0].removeAttribute('checke ...

javascripthtml

Can the values in all fields of a JSON be combined or subtracted with those of another object containing the same fields?

I am currently working with a Mongoose.js schema that is structured as follows: { "City": String, "Year": String, "Population": Number, "Blah": Number, "Nested": { "Something": Number, "More stuff": Number } } Is there an efficient w ...

javascriptjsonnode.js

Update a div in PHP using the data received from an AJAX response

I recently developed a PHP application and encountered an issue with updating the value of a date picker. The user is prompted for confirmation when changing the date, and upon confirmation, the date in the "expiry" field (with id expiry) should update alo ...

javascriptphpjqueryhtmlajax

Eliminate the registration message from TinyMCE by importing a package

Looking to create a TinyMCE React package, I've been using import { Editor } from '@tinymce/tinymce-react'; However, I'm encountering this message - To remove the message, typically you would add the API key to the .js. in your <scr ...

javascriptnpmtinymce

How can I convert a string containing integers into an int[] using javascript or jQuery?

I want to create a feature that allows users to input a list of IDs in a textarea, with the option to separate them by either whitespace or commas. After the user inputs the list, I need to convert it into an int[] array but also throw an error if the str ...

javascriptjquery

Is there a way to postpone the execution of a scheduled interval function?

Below is the setup of my function: setInterval(function () { get_fb(); }, 10000); If a user interacts with an element, such as hovering over it or clicking on it, I want to reset the timer back to 10 seconds. How can I instruct the program to achieve th ...

javascriptjquery

Utilizing query parameters in Next.js

I've been working on a unique Next.js application that incorporates both infinite scroll and a search input feature. The infinite scroll functionality loads 6 additional items whenever the user reaches the bottom of the page. On the other hand, the s ...

javascriptreactjsnext.js

In a Vue.js application, parameter passing does not function as intended

As someone who is new to JavaScript, I have a question regarding Vuex and creating a simple Todo Manager. I am facing an issue with deleting todos from my list and not getting the desired parameter (the id of the todo) in my actions. Here is the code snip ...

javascriptvue.jswebparametersvuex

Extract the innerHTML input value of each row in an HTML table

I've encountered an issue with my HTML table that contains static values, except for one cell which has an input field. When I try to convert the row data into JSON, the single input field is causing complications. Without the input field, I can suc ...

javascriptjqueryjsoninnerhtml

An error popped up as I attempted to load an existing design within the vue-email-editor

https://i.stack.imgur.com/0ObU5.png Check out the code snippet below for the function I have created: editorLoaded() { this.$refs.emailEditor.editor.loadDesign(this.emailJson); console.log('editorLoaded'); }, ...

javascriptvue.js

Utilize JavaScript to send login information to a website

I have a specific task in mind: creating a script that will automatically fill in certain data on an HTML website. To illustrate, let's imagine the site is the StackOverflow login page and I want to input my username and password. For the username fi ...

javascriptjqueryhtmlajax

Having trouble getting Tailwindcss to work with Next.js - what could be causing the configuration issue?

Why is tailwind not displaying correctly in my next.js project? I'm concerned that there might be a problem with my settings. In the styles folder, I have a file called tailwind.css @tailwind base; /* Write your own custom base styles here */ /* S ...

javascriptreactjsnext.jstailwind-csscss-purge

What is the best way to determine if an item qualifies as an Angular $q promise?

In my project, I have an existing API library that is not Angular-based. This library contains a method called .request which returns promises using jQuery.Deferred. To integrate this with Angular, I created a simple service that wraps the .request method ...

javascriptangularjspromise

What is the best way to list the choices associated with a specific category?

The Node.js package I'm currently working with requires an argument of a specific type, which I can see is defined through a TypeScript declaration as follows: export declare type ArgType = 'A' | 'B' | 'C'; I am interes ...

javascriptnode.jstypescripttypes

Converting a JSON object into a format suitable for transmission through AJAX requests

I am attempting to transmit data in a JSobject via AJAX using jQuery. Below is the json object: var cookieData = { 'land' : document.URL, 'ref' : document.referrer }; The object is then stored in a cookie... throu ...

javascriptphpjqueryajax

Endless cycle of React hooks

I am struggling to understand why I keep encountering an infinite loop in my useClick function. I can see that I am updating the state value inside the useEffect using setVal, but according to the second parameter, useEffect should only run on onClick as ...

javascriptreactjsreact-hooks

How do I use onclick to hide a <div> and reveal the content beneath it?

Is there a way for me to hide this <div> when the user clicks outside of it? I want the content behind it to be visible once the <div> is hidden. <html> <style> .overlay { position: fixed; top: 0; left: 0; height: ...

javascriptjquery