Кнопка индикатора выполнения Javascript, которая увеличивает значение на 1 и изменяет ширину стиля на 10

function getProgress() {
	return document.getElementById("progressbar").getAttribute("aria-valuenow");
	return document.getElementById("progressbar").getAttribute("style","width");
	return document.getElementById("progressbar").innerHTML;
	}

function setProgress(value) {
	document.getElementById("progressbar").setAttribute("aria-valuenow",value);
	document.getElementById("progressbar").setAttribute("style","width " +value+ "%");	
	document.getElementById("progressbar").innerHTML = (value+ "%"); 
}

function increment() {
	var i = getProgress();
	if (i < 100){
		i++;
		setProgress(i);	
	}else{
		alert("Download Finished");
	}
}

function decrement() {
	var d = getProgress();
	setProgress(d - 1);
}

function resetButton() {
	var r = getProgress();
	setProgress(r = 0);
}

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous">
	
		
    <title>Progress Bar</title>
	
  </head>
  <body>
	<!-- Container -->
	<div class = "container">
	
    <h1>This Process bar is animated using <br>JavaScript!</h1>
	<br>
	
	<!-- Div For Progress Bar -->
	<div class = "progress">
		<div class = "progress-bar progress-bar-striped" role = "progressbar"  style = "width: 0%;" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100" id = "progressbar" >0%</div>
	</div>
	
	<br>
	<!-- Buttons -->
	<button type = "button" class = "btn btn-primary" onclick = "increment()">Increment</button>
	<button type = "button" class = "btn btn-dark" onclick = "resetButton()">Reset</button>
	<button type = "button" class = "btn btn-success" onclick = "decrement()">Decrement</button>
	<button type = "button" class = "btn btn-warning" onclick = "">Start Auto Progress!</button>
	<button type = "button" class = "btn btn-danger" onclick = "">Stop Auto Progress!</button>
	
	<p id = "value"> </p>
	<!-- End of Container -->
	</div>
	
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity = "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity = "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin = "anonymous"></script>
	<script src = "Assignment4.js"></script>
 </body>
</html>

Я пытаюсь заставить кнопку увеличения изменять значения на 1 каждый раз, когда она нажимается, но я также хочу, чтобы стиль ширины каждый раз увеличивался на 10. Мне было интересно, может ли кто-нибудь помочь мне, пожалуйста. Спасибо.

Ниже приведена часть Javascript.

function getProgress() {
    return document.getElementById("progressbar").getAttribute("aria-valuenow");
    document.getElementById("progressbar").getAttribute("style","width");
    document.getElementById("progressbar").innerHTML;
}

function setProgress(value) {
    document.getElementById("progressbar").setAttribute("aria-valuenow",value);
    document.getElementById("progressbar").setAttribute("style","width " +value+ "%");  
    document.getElementById("progressbar").innerHTML = (value+ "%"); 
}

function increment() {
    var i = getProgress();
    if (i < 100) {
        i++;
        setProgress(i); 
    } else {
        alert("Download Finished");
    }
}

function decrement() {
    var d = getProgress();
    setProgress(d - 1);
}

function resetButton() {
    var r = getProgress();
    setProgress(r = 0);
}

А вот HTML-часть проекта.

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, 

shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous">


        <title>Progress Bar</title>

  </head>
  <body>
<!-- Container -->
    <div class = "container">

    <h1>This Process bar is animated using <br>JavaScript!</h1>
    <br>

    <!-- Div For Progress Bar -->
    <div class = "progress">
        <div class = "progress-bar progress-bar-striped" role = "progressbar"  style = "width: 0%;" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100" id = "progressbar" >0%</div>
    </div>

    <br>
<!-- Buttons -->
<button type = "button" class = "btn btn-primary" onclick = "increment()">Increment</button>
<button type = "button" class = "btn btn-dark" onclick = "resetButton()">Reset</button>
<button type = "button" class = "btn btn-success" onclick = "decrement()">Decrement</button>
<button type = "button" class = "btn btn-warning" onclick = "">Start Auto Progress!</button>
<button type = "button" class = "btn btn-danger" onclick = "">Stop Auto Progress!</button>
    <p id = "value"> </p>
    <!-- End of Container -->
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity = "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity = "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin = "anonymous"></script>
    <script src = "Assignment4.js"></script>
 </body>
</html>here

могу предоставить более подробную информацию, если необходимо, спасибо

Я думаю, вы забыли код!

— 13.03.2019 15:46

@jakemingolla, да, извините, ха-ха, обновите =]

— 13.03.2019 15:47

Вы возвращаете функцию перед выполнением document.getElementById("progressbar").getAttribute("style",‌"width"); document.getElementById("progressbar").innerHTML;}

— 13.03.2019 15:48

что я мог использовать?

— 13.03.2019 15:52

Не могли бы вы опубликовать свой HTML и Javascript в виде исполняемого фрагмента кода? Это облегчило бы кому-то отладку.

— 13.03.2019 17:08

@тремор, хорошо, конечно

— 13.03.2019 19:34

@ Факт, спасибо, я добавил ответ, который вы должны найти подходящим. Если это так, пожалуйста, отметьте как правильное.

— 14.03.2019 15:04

javascript bootstrap-4

13.03.2019 15:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

758

Ответы 1

Были проблемы в ваших функциях для getProgress и setProgress. В getProgress вы возвращались 3 раза, а возврат не работает, в этом случае мы получим значение и вернем только значение. И в setProgress ваш setAttribute для стиля/ширины был синтаксически неправильным. Рабочая версия теперь ниже.

function getProgress() {
  var d = document.getElementById("progressbar").getAttribute("aria-valuenow");
  return d;
}

function setProgress(value) {
  document.getElementById("progressbar").setAttribute("aria-valuenow", value);  
  document.getElementById("progressbar").setAttribute("style", "width: " + value + "%;");
  document.getElementById("progressbar").innerHTML = (value + "%");
}

function increment() {
  var i = getProgress();
  if (i < 100) {
    i++;
    setProgress(i);
  } else {
    alert("Download Finished");
  }
}

function decrement() {
  var d = getProgress();
  setProgress(d - 1);
}

function resetButton() {
  var r = getProgress();
  setProgress(r = 0);
}

<!doctype html>
<html lang = "en">

<head>
  <!-- Required meta tags -->
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous">

  <title>Progress Bar</title>

</head>

<body>
  <!-- Container -->
  <div class = "container">

    <h1>This Process bar is animated using <br>JavaScript!</h1>
    <br>

    <!-- Div For Progress Bar -->
    <div class = "progress">
      <div class = "progress-bar progress-bar-striped" role = "progressbar" style = "width: 0%;" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100" id = "progressbar">0%</div>
    </div>

    <br>
    <!-- Buttons -->
    <button type = "button" class = "btn btn-primary" onclick = "increment()">Increment</button>
    <button type = "button" class = "btn btn-dark" onclick = "resetButton()">Reset</button>
    <button type = "button" class = "btn btn-success" onclick = "decrement()">Decrement</button>
    <button type = "button" class = "btn btn-warning" onclick = "">Start Auto Progress!</button>
    <button type = "button" class = "btn btn-danger" onclick = "">Stop Auto Progress!</button>

    <p id = "value"> </p>
    <!-- End of Container -->
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity = "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin = "anonymous"></script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity = "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin = "anonymous"></script>
  <script src = "Assignment4.js"></script>
</body>

</html>

14.03.2019 02:37

Другие вопросы по теме

Можно ли изменить цвет расширенной панели навигации в Bootstrap 4?

Bootstrap 4: Вертикальная линия на мобильных устройствах и в полноэкранном режиме

Таблица Accordion Bootstrap с пробелами

Система сетки внутри формы начальной загрузки: встроенный выбор и ввод

Бутстрап схлопывает аккордеон с разделенными головой и телом

Не удалось исправить левую боковую панель

Модальная ловушка Bootstrap 4 вместо модальной ловушки потеряна

Угловой раскрывающийся список с множественным выбором

Как я могу сохранить кнопки, когда кнопка перетаскивается или отбрасывается jQuery ui

Столбцы неправильно выравниваются на экране с помощью начальной загрузки 4

Кнопка индикатора выполнения Javascript, которая увеличивает значение на 1 и изменяет ширину стиля на 10

Ответы 1

Другие вопросы по теме

Похожие вопросы