html - moving button in javascript - Stack Overflow

admin管理员组

文章数量:1379719

There are next and prev buttons in the slideshow, that I want they move a few pixels and change their colors after clicking on these buttons. The button returns to the normal position by removing the mouse. Although I know I can coding with CSS, but it is part of my homework and I have to do that with javascript. This is my code but it doesn't work and I don't know why ...

function press() {
    document.getElementById(this).style.right = "-10px";
    document.getElementById(this).style.backgroundColor = "red";
}

<a class="prev" onclick="plusSlides(1)" onmousedown="press()">&#10094;</a>
<a class="next" onclick="plusSlides(-1)" onmousedown="press()">&#10095;</a>

There are next and prev buttons in the slideshow, that I want they move a few pixels and change their colors after clicking on these buttons. The button returns to the normal position by removing the mouse. Although I know I can coding with CSS, but it is part of my homework and I have to do that with javascript. This is my code but it doesn't work and I don't know why ...

function press() {
    document.getElementById(this).style.right = "-10px";
    document.getElementById(this).style.backgroundColor = "red";
}

<a class="prev" onclick="plusSlides(1)" onmousedown="press()">&#10094;</a>
<a class="next" onclick="plusSlides(-1)" onmousedown="press()">&#10095;</a>

• javascript
• html
• css

Share Improve this question Follow edited Jul 26, 2018 at 12:53 eisbehr 12.5k77 gold badges4141 silver badges6565 bronze badges asked Jul 26, 2018 at 12:40 mahroomahroo 6711 silver badge66 bronze badges 2

• is jQuery available? – Aayush Sharma Commented Jul 26, 2018 at 12:42
• @mahroo you should pass attribute id value to the getElementById() not this – Sivakumar Tadisetti Commented Jul 26, 2018 at 12:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You need to pass this to the function, then you have the element directly.

function press(element) {
    element.style.marginRight = "-10px";
    element.style.backgroundColor = "red";
}

<a class="prev" onmousedown="press(this)">&#10094;</a>
<a class="next" onmousedown="press(this)">&#10095;</a>

function applyStyles(element) {
  element.style.backgroundColor = 'red';
  element.style.fontSize = '18px'
}

function revertStyles(element) {
  element.style.backgroundColor = 'white';
  element.style.fontSize = '15px'
}

<span onclick="applyStyles(this)" onmouseleave="revertStyles(this)">&#10094;</span>
<span onclick="applyStyles(this)" onmouseleave="revertStyles(this)">&#10095;</span>

The native function getElementById only accepts a string as parameter, that must be the "id" of the html element you want to iterate with. Your code should be something like this:

function press(id){
    document.getElementById(id).style.right="-10px";
    document.getElementById(id).style.backgroundColor="red";
}


<a id="prev" class="prev" onmousedown="press(this.id)" >&#10094;</a>
<a id="next" class="next" onmousedown="press(this.id)">&#10095;</a>

You too can make it directly changing only your js function by passing this as function parameter:

function press(htmlElement){
    htmlElement.style.marginRight="-10px";
    htmlElement.style.backgroundColor="red";
}

本文标签： htmlmoving button in javascriptStack Overflow